grunt gulp
grunt:
壓縮代碼，合并代碼，檢測代碼書寫規(guī)范...
前端自動(dòng)化工具
構(gòu)建項(xiàng)目
官網(wǎng)：http://gruntjs.com/
中文官網(wǎng)：http://www.gruntjs.net/
插件地址：http://gruntjs.com/plugins
基于：node
給grunt發(fā)任務(wù)，讓他做什么
--------------------------
使用流程：
1.安裝grunt的命令環(huán)境
npm install -g grunt-cli
驗(yàn)證grunt已安裝
grunt -version
2.需要準(zhǔn)備兩個(gè)文件：（名字不能亂叫）
Gruntfile.js? 編寫任務(wù)(手動(dòng)創(chuàng)建)
package.json 工程文件（npm init ? ?一路回車）
3.編寫具體任務(wù)（在Gruntfile里寫）
module.exports=function(grunt){
}
4.運(yùn)行任務(wù)
找到Gruntfile這個(gè)js所在目錄
執(zhí)行命令： grunt
5.安裝本地grunt
npm install grunt
-----------------------------------
壓縮一個(gè)js：
*任務(wù)->通過插件(模塊)
關(guān)于grunt插件的一個(gè)分類：
1.加星的是grunt團(tuán)隊(duì)自己開發(fā)
2.由第三方編寫
（能用官方的就用官方的）
引用：contrib-uglify
使用：? 自覺在前面加一個(gè)grunt
編寫具體任務(wù)的格式：
主任務(wù)名:{
子任務(wù)名:{},
子任務(wù)名2:{},
子任務(wù)名3:{},
子任務(wù)名4:{}
}
運(yùn)行g(shù)runt任務(wù)：
1.grunt
2.grunt 主任務(wù)名
3.grunt 主任務(wù)名:子任務(wù)名
配置選項(xiàng)：
options: {
mangle: false
},
總結(jié)：
1.module.exports=function(grunt){});
2.在官網(wǎng)上找到對應(yīng)的插件，復(fù)制下來下載后執(zhí)行第三步
3.導(dǎo)入模塊
grunt.loadNpmTasks('模塊名稱');
3.配置具體任務(wù)
grunt.initConfig({
uglify:{
a:{
options: {
mangle: false
},
src:'src/a.js',//源文件地址
dest:'dest/a.min.js'//目標(biāo)文件
},
b:{
src:'src/jquery-3.1.1.js',//源文件地址
dest:'dest/jquery-3.1.1.min.js'//目標(biāo)文件
}
}
});
4.注冊一個(gè)默認(rèn)任務(wù)
grunt.registerTask('default',['uglify','','']);
--------------------------------------
通用選項(xiàng)：
src 源文件地址
dest 目標(biāo)地址
expand 使分開
cwd? 當(dāng)前工作目錄
配置任務(wù)，可以使用一些通配符（正則）
* 所有文件
** 任何目錄
默認(rèn)情況下，壓縮并且合并了
-------------------------------------------
合并css：
插件（模塊）：
------------------------------
壓縮css
npm install grunt-contrib-cssmin
---------------------------------------------
壓縮html:
npm install grunt-contrib-htmlmin
選項(xiàng)配置：
options: {
removeComments: true, //刪除注釋
collapseWhitespace: true//刪除空格
},
------------------------------------
壓縮圖片：
npm install grunt-contrib-imagemin
----------------------------------------
監(jiān)聽模塊：
npm install grunt-contrib-watch
用法：
任務(wù)名:{
files:監(jiān)聽哪些文件發(fā)生變動(dòng)
tasks：運(yùn)行哪些任務(wù)
}
----------------------------------------------
一些常見模塊：
grunt-contrib-watch 監(jiān)聽變化
grunt-contrib-uglify 壓縮js
grunt-contrib-cssmin 壓縮css
grunt-contrib-htmlmin 壓縮html
grunt-contrib-imagemin 壓縮圖片
grunt-contrib-concat 合并文件
grunt-contrib-clean 刪除文件以及文件夾
grunt-contrib-copy 復(fù)制東西
grunt-contrib-jshint 檢測js語法代碼
------------------------------------------------
打包一個(gè)真正的項(xiàng)目：
壓縮各個(gè)文件
js
css
html
壓縮圖片：
img
-------------------------------------------------------
package.json? 工程文件
1:手動(dòng)創(chuàng)建：
{
'name':'application-name',
'version':'0.0.1'
}
2.npm init? 初始化一個(gè)項(xiàng)目
一路回車
用處：告訴我們整個(gè)項(xiàng)目的情況
-------------------------------------------
安裝模塊：
1.npm install 模塊名
把此模塊，安裝到本項(xiàng)目目錄中
2.npm install 模塊名 -save
不僅會(huì)把模塊，安裝到本目錄，而且會(huì)寫入到package.json文件里面，寫到dependencies選項(xiàng)里面
3.npm install 模塊名 -save-dev? (推薦)
不僅會(huì)把模塊，安裝到本目錄，而且會(huì)寫入到package.json文件里面，寫到dependencies選項(xiàng)里面
--------------------------------------
同事拿到你的代碼后：（不給他插件）
1.npm install
2.grunt
--------------------------------------------
玩grunt的時(shí)候一定一定要注意目錄名稱（比如說括號不能用）
———————————————————————————————————————————
gulp和grunt形式都差不多
gulp的監(jiān)聽是內(nèi)有的所以就不用再單獨(dú)去下載。
