前端自动化集成工具：前端框架+工具
例如：Yeoman / Bower / Grunt / Gulp
一、grunt
压缩、编译、单元测试、代码校验等
安装 ( node 环境下进行 )
npm install -g grunt-cli
检测:
grunt
出现以下错误：Fatal error: Unable to find local grunt.
npm install之所以会报错，是因为安装时没有全局安装 -g，程序会按照package.json文件指定安装，找不到package.json文件，所以会报错。
二、Yeoman
代码校验、测试、压缩
安装：
npm install -g yo
检测：
yo -v
安装 生成器安装包：
npm install -g generator-angular
mkdir yo-in-action
cd yo-in-action
mkdir angular-in-action
cd angular-in-action
yo angular yo angular learnangular
三、Bower
web包管理器
安装：
npm install -g bower
检测：
bower -v
bower install jquery // 安装jquery
bower install bootstrap // 安装bootstrap
如果组件比较小众，没有在bower注册：
1、通过github的短写安装
去github找到你要安装的组件
例如：
bower install jquery/meetings.jquery.org
2、项目完整的github地址
bower install https://github.com/jquery/meetings.jquery.org.git
3、直接URL安装（github上没有这个插件时）
bower install url
bower的两个配置文件
1.bower.json:
生成bower.json文件：bower init
执行bower install 命令，会根据bower.json中内容的配置项下载
2.bowerrc:
{
"directory" : "bower_components",
"proxy" : "http://proxy.tencent.com:8080",
"https-proxy" : "https://proxy.tencent.com:8080",
"timeout" : 60000ms
}
四、备注：
~表示版本号只能最后一位更改
^表示版本号除了第一位都能更改
命令行 r m 代表删除
npm install -g generator-webapp
yo webapp grunt-by-yo
grunt详细：
新建文件，准备工作
mkdir grunt-in-action
cd grunt-in-action
mkdir grunt-empty
cd grunt-empty
------------------------------
vim index.html
mkdir js
cd js
vim index.js
------------------------------
npm init // 初始化package.json , 老项目也可以运行
npm install grunt --save-dev // 安装 grunt
npm install load-grunt-tasks time-grunt --save-dev // 安装插件
npm install grunt-contrib-copy --save-dev // 安装tasks
npm install grunt-contrib-clean --save-dev // 安装文件删除插件
------------------------------
新建 Gruntfile.js 文件（根目录下）
------------------------------
新建 app目录（根目录下），把index.html、js文件夹拖进app目录下
补充Gruntfile.js文件：
//任务配置
grunt.initConfig({
config: config,
//配置copy命令
copy:{
方法一：---------------------------------------------------------------------------------------------
dist_js:{
src:'<%= config.app %>/js/index.js',
//目标文件
dest:'<%= config.dist %>/js/index.js'
}，
dist_html:{
//源文件
src:'<%= config.app %>/index.html',
//目标文件
dest:'<%= config.dist %>/index.html'
// config.后面是文件夹目录
}
方法二：---------------------------------------------------------------------------------------------
dist_html:{
files:[
{
src:'<%= config.app %>/index.html',
dest:'<%= config.dist %>/index.html'
},
{
src:'<%= config.app %>/js/index.js',
dest:'<%= config.dist %>/js/index.js'
}
]
}
方法三：---------------------------------------------------------------------------------------------
dist_html:{
files: {
'<%= config.dist %>/index.html':'<%= config.app %>/index.html',
'<%= config.dist %>/js/index.js':['<%= config.app %>/js/index.js']
}
}
--------------------------------------------------------------------------------------------------------
} , // 这里逗号要注意，否则报错 copy结束后
//配置清除命令
clean:{
// dist 里面参数：src、filter、nonull(调试)、dot、matchBase
dist:{
方法一：-----------------------------------------------------------------------------------
//只需要配置src，不需要配置dest
// 这是删除一个文件
src:'<%= config.dist %>/index.html'
// 这是删除多个文件
src: [ '<%= config.dist %>/index.html',
'<%= config.dist %>/js/index.js'
]
方法二：-----------------------------------------------------------------------------------
src: [ ' <%= config.dist %>/**/* ' ] ，
// 此时js文件夹也会被删除
// 保留文件夹
1. filter: 'isFile'
2. filter: function(filepath){ return (!grunt.file.isDir(filepath)); }
// 通配符规则：=================== // 一个*时：匹配任意字符，但是不匹配 / // 两个*时：匹配任意多个字符，匹配 / // 问号?时：只匹配一个字符，但不匹配 / // {a , b }.js 时：则匹配 a.js 和 b.js // 一个 ! 时：匹配当前内容取反
}
}，
// serve / test / ! build。。。
// 图片资源文件放在CDN上缓存
});
运行grunt copy
运行grunt clean