Grunt 依賴 Node.js 所以在安裝之前確保你安裝了 Node.js。然后開(kāi)始安裝 Grunt
實(shí)際上攀唯,安裝的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt噪窘,這樣你就可以使用 grunt 命令來(lái)執(zhí)行某個(gè)項(xiàng)目中的 Gruntfile.js 中定義的 task 。但是要注意效扫,Grunt-cli 只是一個(gè)命令行工具倔监,用來(lái)執(zhí)行,而不是 Grunt 這個(gè)工具本身
項(xiàng)目的github地址:grunt_test
-
1.安裝node
-
2.grunt命令行(CLI) 安裝在全局環(huán)境下菌仁,所以命令是這么寫(xiě)滴浩习!
npm install -g grunt-cli
-
3.新建一個(gè)項(xiàng)目,名字叫g(shù)runt_test:注意济丘,千萬(wàn)不要叫g(shù)runt谱秽,后面運(yùn)行g(shù)runt命令的時(shí)候會(huì)出錯(cuò)
下面是我的項(xiàng)目目錄
-
4.生成package.json,也可以手動(dòng)生成這樣一個(gè)文件
npm init
生成之后在里面填入以下內(nèi)容
-
5.安裝grunt
npm install grunt --save-dev 注意查看package.json文件
偶闪盔?自動(dòng)把grunt的版本號(hào)加上啦弯院。對(duì)啦,這就是--save-dev的作用
-
6.安裝grunt插件
js語(yǔ)法檢查:grunt-contrib-jshint
安裝命令:npm install grunt-contrib-jshint --save-dev 下同
css語(yǔ)法檢查:grunt-contrib-csslint
合并文件:grunt-contrib-concat
js壓縮文件:grunt-contrib-uglify
css壓縮文件:grunt-contrib-cssmin
image壓縮文件:grunt-contrib-imagemin
html壓縮文件:grunt-contrib-htmlmin
Sass\Scss 編譯:grunt-contrib-sass
安裝sass插件后泪掀,我運(yùn)行g(shù)runt听绳,發(fā)現(xiàn)報(bào)錯(cuò),提示ruby沒(méi)有安裝异赫,所以如果需要使用到這個(gè)插件的椅挣,要確保自己的電腦上是否有裝ruby,沒(méi)有的話要進(jìn)行安裝
sudo yum install ruby
# CentOS, Fedora, 或 RHEL 系統(tǒng)
sudo apt-get install ruby-full
# Debian 或 Ubuntu 系統(tǒng)
brew install ruby
#蘋果系統(tǒng)
Less 編譯:grunt-contrib-less
監(jiān)聽(tīng)文件變動(dòng):grunt-contrib-watch
建立本地服務(wù)器:grunt-contrib-connect
上面這些插件都安裝好后塔拳,注意看package.json文件中的內(nèi)容
-
7.配置Gruntfile.js
這里是對(duì)每個(gè)需要的插件進(jìn)行配置
插件太多了鼠证,挑其中一個(gè)(uglify,用于js壓縮)進(jìn)行詳細(xì)說(shuō)明
grunt是任務(wù)機(jī)制靠抑,我在這里給定了combine量九、compress、fileCompress三個(gè)任務(wù),執(zhí)行g(shù)runt時(shí)會(huì)按順序執(zhí)行三個(gè)任務(wù)
uglify:{
options:{
sourceMap: false,
stripBanners: true,
//壓縮后的文件注釋信息
banner :'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n',
footer:'\n/*!修改于<%= grunt.template.today("yyyy-mm-dd") %> */'
},
combine: {
files: {
'build/static/js/compress-<%= pkg.name %>-<%= pkg.version %>.min.js': ['dev/static/js/*.common.js'],
'build/static/js/compress.common.min.js': ['dev/static/js/*/*.common.js']
}
},
compress:{
options:{
report:"min",
},
files:[{
expand:true,
cwd:'dev/static/js',
src:['*.js','!*.min.js','!*.common.js'],
dest:'build/static/js',
ext:'.min.js'
}]
},
fileCompress:{
options:{
},
files:[{
expand:true,
cwd:'dev/static/js',
src:['**/*.js','!**/*.min.js','!**/*.common.js'],
dest:'build/static/js/',
ext:'.min.js'
}]
}
},
uglify:combine 用來(lái)合并文件
uglify:compress用來(lái)壓縮文件
uglify:fileCompress也是用來(lái)壓縮文件
下面兩個(gè)的區(qū)別在于 files中的src:*/.js用來(lái)匹配所有的js荠列,注意类浪,輸出的時(shí)候會(huì)保留目錄層次,如果是合并到一個(gè)文件中肌似,就把dest寫(xiě)成
dest: 'build/static/js/common.js'费就,并且不寫(xiě)ext就可以
grunt配置總體圖
最后一行代碼是注冊(cè)任務(wù),當(dāng)然川队,除了default力细,我們也可以注冊(cè)到別的Task上去,比如
grunt.registerTask('compress', ['uglify:build']);
如果想要執(zhí)行這個(gè) task固额,我們就不能只輸入
grunt
命令了眠蚂,我們需要輸入 grunt compress
命令來(lái)執(zhí)行這條 task,而這條 task 的任務(wù)是 uglify 下面的 build 任務(wù)对雪,也就是說(shuō)河狐,我們只會(huì)執(zhí)行 uglify 里面 build 定義的任務(wù),而不會(huì)執(zhí)行 uglify 里面定義的其他任務(wù)瑟捣。這里需要注意的是,task 的命名不能與后面的任務(wù)配置同名栅干,也就是說(shuō)這里的 compress 不能命名成 uglify迈套,這樣會(huì)報(bào)錯(cuò)或者產(chǎn)生意外情況
-
8.運(yùn)行查看效果
在grunt_test目錄下,運(yùn)行g(shù)runt碱鳞,我現(xiàn)在是默認(rèn)執(zhí)行uncss和htmlmin
詳細(xì)代碼放在github上面了桑李,鏈接地址:grunt_test