</br>
grunt是一個優(yōu)秀的前端的自動化生產(chǎn)工具，最開始作者一直不用這類工具吟吝，感覺麻煩指蚁，但是當(dāng)后面項目大一些后開始嘗試使用菩佑，就一發(fā)不可收拾，但是對于grunt的一些機制原理等凝化，自己也是搗鼓了一些時間稍坯，今天就來總結(jié)一下自己的經(jīng)驗，希望對部分同學(xué)能有一些幫助搓劫。
1.grunt的用處
對于需要反復(fù)重復(fù)的任務(wù)瞧哟，例如壓縮（minification）、編譯枪向、單元測試勤揩、linting等，代碼合并等等遣疯，grunt可以減輕你的勞動雄可，簡化你的工作凿傅。當(dāng)你在 Gruntfile 文件正確配置好了任務(wù)，任務(wù)運行器就會自動幫你完成大部分無聊的工作
2.grunt的三要素
- task
- target
- options
先來簡單解釋一下這三個要素吧
1. task
這個就是grunt的任務(wù)数苫，之前提過grunt是用來自動執(zhí)行各種各樣的任務(wù)的聪舒，比如壓縮文件，合并文件虐急，單元測試等等箱残，這些都是一系列任務(wù)
2.target
這個是任務(wù)的目標(biāo)，也就是任務(wù)具體做的事止吁，例如有一個合并文件的任務(wù)被辑，這個任務(wù)可以做兩件具體的事:
- build1：合并a.css和b.css
- build2：合并a.css和c.css
每一個具體的事情就是一個target
3.options
從字面上就可以理解，這個就是配置敬惦。task或者target的配置盼理，每個task有自己的配置，每個target也可以有自己的配置
開始做個Demo吧
</br>
咱們按順序開始以下幾步吧
- 裝上node和git俄删，然后新建一個文件夾
- 在文件夾的根目錄中打開git 執(zhí)行 npm init宏怔，會新建一個package.json文件，只需填寫一下基本內(nèi)容就好畴椰，在此不贅述了臊诊。
- 全局安裝grunt命令行，執(zhí)行 npm install -g grunt-cli斜脂，這樣后面就可以用grunt命令來執(zhí)行之前我們說的task和target了
- 安裝grunt和四個插件抓艳，執(zhí)行命令：
- npm install grunt --save-dev 安裝grunt
- npm install grunt-contrib-uglify --save-dev 安裝壓縮插件
- npm install grunt-contrib-watch --save-dev 安裝監(jiān)控文件變化插件
- npm install grunt-contrib-cssmin --save-dev 安裝css壓縮插件
- npm install grunt-contrib-csscomb --save-dev 安裝css合并插件
- 新建一個Gruntfile.js文件，這個文件中主要寫的對各個任務(wù)的配置帚戳，直接貼出一個簡單的Gruntfile.js的文件內(nèi)容吧
module.exports=function(grunt){
// 任務(wù)配置玷或，所有插件的配置信息
grunt.initConfig({
// watch插件配置信息,用于觀察文件的變化
watch:{
build:{
files:['src/js/*.js','src/css/*.css'],
tasks:['jshint','uglify','cssmin','csscomb'],
options:{spawn:false}
}
},
// uglify插件配置信息，用于壓縮文件
uglify: {
build: {
files:{
'build/js/yourName.min.js':['src/js/test.js']
}
}
},
// cssmin插件配置信息销斟，用于壓縮css
cssmin:{
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
build: {
files: {
'build/css/output.min.css': ['src/css/*.css']
}
}
},
// csscomb插件配置信息庐椒，用于合并css
csscomb: {
bulid: {
files:{
"src/dest/css/output.restored.css":["src/css/test.css"],
"src/dest/css/output2.restored.css":["src/css/test2.css"]
}
}
}
});
// 加載包含任務(wù)的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-csscomb');
// 默認(rèn)被執(zhí)行的任務(wù)列表。
grunt.registerTask('default', ['uglify','cssmin','csscomb','watch']);
};
在上面的代碼中蚂踊，有watch，uglify笔宿，cssmin犁钟，csscomb四個task，每個task里面都有自己的options和target(uglify里沒有options因為options并不是必須的泼橘，根據(jù)需求而定)</br>
對于每個task的build target里都有files屬性涝动，files屬性里主要是輸入和輸出文件,files中的輸入輸出文件有四種寫法，在grunt中文官網(wǎng)有詳細(xì)描述炬灭，這里我就不細(xì)說了醋粟。
</br>
對于每個task的options，不同插件有不同的配置方式，需要各位在使用對應(yīng)的插件時米愿，去grunt插件官網(wǎng)看看基本的配置方法和插件描述
- 在項目根目錄打開git厦凤，如果直接執(zhí)行g(shù)runt命令，則會執(zhí)行組合的‘default’任務(wù)育苟，也就是uglify ,cssmin,csscomb,watch四個task,如果需要執(zhí)行指定的單個task较鼓，例如uglify，則執(zhí)行命令grunt uglify违柏，如果需要執(zhí)行task的具體target博烂，例如cssmin的build，則執(zhí)行命令grunt cssmin:build
總結(jié)一下漱竖，grunt這個工具的目的其實就是讓我們方便地使用各種插件來幫助我們進行開發(fā)禽篱，而它的工作機制其實就是：首先我們用node安裝好了基本的環(huán)境后，需要用什么插件就node install 插件名稱馍惹，然后在Gruntfile.js中配置這個插件task的options和target就行了谆级，最后按需執(zhí)行插件！
</br>
這篇其實算不上一個grunt的完整Demo讼积，比如路徑配置肥照，files，特殊插件配置和更靈活的用法都沒介紹勤众，我也沒打算做這樣一個教程舆绎，因為也已經(jīng)有不少優(yōu)秀的grunt教程了，grunt中文網(wǎng)也有们颜。不過單看教程并不能讓我們更好地使用grunt吕朵，后面需要用到的其他插件需要去官網(wǎng)看看插件的基本配置和介紹，一些其他用法也都是需要去官網(wǎng)或者其它大牛博客看看的窥突，我現(xiàn)在只是從理解grunt本身這方面來做的一個淺顯的介紹努溃，希望能幫助到部分同學(xué)，共勉阻问！
