grunt gulp
grunt:
压缩代码，合并代码，检测代码书写规范...
前端自动化工具
构建项目
官网：http://gruntjs.com/
中文官网：http://www.gruntjs.net/
插件地址：http://gruntjs.com/plugins
基于：node
给grunt发任务，让他做什么
--------------------------
使用流程：
1.安装grunt的命令环境
npm install -g grunt-cli
验证grunt已安装
grunt -version
2.需要准备两个文件：（名字不能乱叫）
Gruntfile.js 编写任务(手动创建)
package.json 工程文件（npm init 一路回车）
3.编写具体任务（在Gruntfile里写）
module.exports=function(grunt){
}
4.运行任务
找到Gruntfile这个js所在目录
执行命令： grunt
5.安装本地grunt
npm install grunt
-----------------------------------
压缩一个js：
*任务->通过插件(模块)
关于grunt插件的一个分类：
1.加星的是grunt团队自己开发
2.由第三方编写
（能用官方的就用官方的）
引用：contrib-uglify
使用： 自觉在前面加一个grunt
编写具体任务的格式：
主任务名:{
子任务名:{},
子任务名2:{},
子任务名3:{},
子任务名4:{}
}
运行grunt任务：
1.grunt
2.grunt 主任务名
3.grunt 主任务名:子任务名
配置选项：
options: {
mangle: false
},
总结：
1.module.exports=function(grunt){});
2.在官网上找到对应的插件，复制下来下载后执行第三步
3.导入模块
grunt.loadNpmTasks('模块名称');
3.配置具体任务
grunt.initConfig({
uglify:{
a:{
options: {
mangle: false
},
src:'src/a.js',//源文件地址
dest:'dest/a.min.js'//目标文件
},
b:{
src:'src/jquery-3.1.1.js',//源文件地址
dest:'dest/jquery-3.1.1.min.js'//目标文件
}
}
});
4.注册一个默认任务
grunt.registerTask('default',['uglify','','']);
--------------------------------------
通用选项：
src 源文件地址
dest 目标地址
expand 使分开
cwd 当前工作目录
配置任务，可以使用一些通配符（正则）
* 所有文件
** 任何目录
默认情况下，压缩并且合并了
-------------------------------------------
合并css：
插件（模块）：
------------------------------
压缩css
npm install grunt-contrib-cssmin
---------------------------------------------
压缩html:
npm install grunt-contrib-htmlmin
选项配置：
options: {
removeComments: true, //删除注释
collapseWhitespace: true//删除空格
},
------------------------------------
压缩图片：
npm install grunt-contrib-imagemin
----------------------------------------
监听模块：
npm install grunt-contrib-watch
用法：
任务名:{
files:监听哪些文件发生变动
tasks：运行哪些任务
}
----------------------------------------------
一些常见模块：
grunt-contrib-watch 监听变化
grunt-contrib-uglify 压缩js
grunt-contrib-cssmin 压缩css
grunt-contrib-htmlmin 压缩html
grunt-contrib-imagemin 压缩图片
grunt-contrib-concat 合并文件
grunt-contrib-clean 删除文件以及文件夹
grunt-contrib-copy 复制东西
grunt-contrib-jshint 检测js语法代码
------------------------------------------------
打包一个真正的项目：
压缩各个文件
js
css
html
压缩图片：
img
-------------------------------------------------------
package.json 工程文件
1:手动创建：
{
'name':'application-name',
'version':'0.0.1'
}
2.npm init 初始化一个项目
一路回车
用处：告诉我们整个项目的情况
-------------------------------------------
安装模块：
1.npm install 模块名
把此模块，安装到本项目目录中
2.npm install 模块名 -save
不仅会把模块，安装到本目录，而且会写入到package.json文件里面，写到dependencies选项里面
3.npm install 模块名 -save-dev (推荐)
不仅会把模块，安装到本目录，而且会写入到package.json文件里面，写到dependencies选项里面
--------------------------------------
同事拿到你的代码后：（不给他插件）
1.npm install
2.grunt
--------------------------------------------
玩grunt的时候一定一定要注意目录名称（比如说括号不能用）
———————————————————————————————————————————
gulp和grunt形式都差不多
gulp的监听是内有的所以就不用再单独去下载。
