[工具]前端自动化工具grunt+bower+yoman

安装过程

• 安装nodejs
• 安装grunt，bower，yoeman

命令：（-g 表示全局安装，否则安装到当前目录下）

npm install -g grunt-cli

npm install -g yo

npm install -g bower

删除已安装：

npm unintall -g yo

yoman -- “脚手架”

• 针对不同web工程，安装相应yoman“脚手架”生成器，eg：angular工程

npm install -g generator-angular

• 创建项目文件夹（注意不要有-，空格等其他符号）

mkdir testAngular

cd testAngular

• 生成angular项目，eg：项目名称为“angularProject”

yo angular angularProject

• 查看node项目，查看package.json文件，包含生成项目基本信息。

name为项目名称，而非所在文件夹名称，version为版本号，dependencies为项目运行需要的依赖环境，devDpendencies为项目开发所需要的依赖环境。^表示版本宽松依赖，主版本号符合即可，再执行npm install会自动更新为最近的版本。~表示最小的版本号更新。

文件功能

• node-modules：存放项目开发时需要的依赖环境
• test:测试时使用的文件
• editorconfig：代码风格设置

其他命令

• ls（显示文件夹下文件列表）
• clear（清屏）
• rm （删除）
• touch （新建一个文件）

bower -- 包管理工具##

bower是一个包管理器，可以安装需要的框架开发包，eg：jquery

bower install jquery

安装组件包

bower install bootstrap

如果组件比较小众，没有在bower注册，可按以下方式安装：

• github短语安装

如图是jquery在github的短语名，假设jquery没有在bower注册，可以用以下命令安装它

bower install jquery/jquery

• 通过项目完整github地址安装

bower install https://github.com/jquery/jquery.git

• 直接通过url安装

bower instal http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

bower init

在当前文件夹下生成bower.json文件，根据bower.json文件安装所需的组件和包

bower init

将工具包安装成devDenpendencies

bower install angular --save-dev

将工具包安装成运行环境依赖

bower install angular --save

.bowerrc

{
"directory":"bower_components",
"proxy":"http://prox.aaa.com:8080",      //代理
"https-proxy":"http://prox.aaa.com:8080",
"timeout":60000                          //单位毫秒
}

grunt

grunt中task，option，target的举例



compass为一个task，opitions说明具体完成什么操作。dist和server都是target，表示该task针对谁。

运行单个task，eg：tast为compass

grunt compass

只针对某个target运行单个task

grunt compass：dist

将task组合起来，一起运行，在Gruntfile.js中有最后的配置：

grunt build

老项目如何整合grunt

• 创建项目文件夹以及文件
• 创建package.json

npm init

npm install grunt --save-dev

npm install grunt --save

• 安装load-grunt-tasks插件

npm install load-grunt-tasks --save-dev

• 安装time-grunt插件

npm install time-grunt --save-dev

• 编写Gruntfile.js文件

npm install grunt-contrib-copy --save-dev 官方文件拷贝

npm install grunt-contrib-clean --save-dev 官方文件删除

Gruntfile.js文件中添加copy和clean两个target

开源协议

MIT BSD ISC Apache GPL

查看端口占用

列出端口

netstat -ano

搜索目的端口

netstat -aon|findstr "49157"

搜索目的端口对应PID指向的应用

tasklist|findstr "2720"

grunt命令

• grunt serve
• grunt serve --allow-remote 包括以下几个小task：
• wiredep：根据bower.json配置项目依赖，在相应html等文档中加入引用连接
• cocurrent：server： 把sass文件编译成css文件，复制到.tmp文件下
• autoprefixer： 添加厂商前缀
• connnect：livereload
• watch：监听本地文件修改