一融蹂、什么是Grunt
Grunt是一個(gè)任務(wù)管理器拟烫，可以使用它來(lái)校驗(yàn)Javascript語(yǔ)法、css壓縮肚逸、Sass編譯等一些前端工程化的任務(wù)。借用官網(wǎng)的說(shuō)法就是“對(duì)于需要反復(fù)重復(fù)的任務(wù)彬坏，例如壓縮朦促、編譯、單元測(cè)試栓始、linting等务冕，自動(dòng)化工具可以減輕你的勞動(dòng)，簡(jiǎn)化你的工作幻赚。當(dāng)你在 Gruntfile 文件正確配置好了任務(wù)禀忆，任務(wù)運(yùn)行器就會(huì)自動(dòng)幫你或你的小組完成大部分無(wú)聊的工作÷淠眨”
二箩退、安裝及原理
2.1 安裝命令
Grunt是基于Node.js運(yùn)行并通過(guò)npm安裝和管理的，安裝命令如下
npm install -g grunt-cli
在安裝的時(shí)候佳谦，可能會(huì)遇到權(quán)限問(wèn)題戴涝，所以，我們?cè)趌inux/mac系統(tǒng)上需要
sudo npm install -g grunt-cli
windows環(huán)境下需要用管理員模式來(lái)執(zhí)行該命令。
2.2 原理工作
運(yùn)行g(shù)runt的時(shí)候啥刻，它就是利用Node.js提供的require方法來(lái)找到本地安裝的grunt奸鸯。找到后，腳手架(CLI)加載Grunt郑什，然后通過(guò)Gruntfile中的配置信息府喳，執(zhí)行你自己配置的任務(wù)，所以說(shuō)蘑拯，一個(gè)Grunt管理工具钝满，最重要的是Gruntfile這個(gè)文件，因?yàn)槔锩娲娣胖覀兊膖ask任務(wù)申窘。
Gruntfile文件的主要作用有兩個(gè):
配置或定義自己的任務(wù)task
加載grunt插件
三弯蚜、搭建
對(duì)于一個(gè)新的前端項(xiàng)目搭建，我們會(huì)如何配合grunt來(lái)做呢剃法？
1.首先創(chuàng)建一個(gè)文件夾(目錄)碎捺，例如叫project
2.然后進(jìn)入project的根目錄，我們通過(guò)
npm init先把package.json這個(gè)文件創(chuàng)建起來(lái)贷洲，新手的話收厨，可以直接一直按回車一直按到創(chuàng)建完畢，以后會(huì)詳細(xì)說(shuō)這個(gè)npm init創(chuàng)建package.json里面的內(nèi)容究竟有什么用优构。3.現(xiàn)在在package.json同級(jí)目錄下（即project的根目錄）诵叁，創(chuàng)建一個(gè)名字為Gruntfile.js,然后編寫以下代碼
但是現(xiàn)在執(zhí)行g(shù)runt的話就會(huì)報(bào)錯(cuò)，為什么呢钦椭，因?yàn)樾枰惭bGruntfile當(dāng)中使用了的插件拧额，例如現(xiàn)在用到了grunt-contrib-uglify所以我們需要通過(guò)以下命令安裝一下。
npm install grunt-contrib-uglify --save-dev
這時(shí)候grunt-contrib-uglify這個(gè)名稱和對(duì)應(yīng)它的版本會(huì)寫入到package.json
OK彪腔！侥锦，到了這里就可以去到project的根目錄運(yùn)行grunt命令了，如果沒(méi)有任何參數(shù)帶上德挣，就是執(zhí)行default定義的任務(wù)恭垦。registerTask函數(shù)有2個(gè)參數(shù)，自定義的任務(wù)名和任務(wù)列表格嗅，任務(wù)列表就是一個(gè)字符串?dāng)?shù)組番挺，可以指定一個(gè)或多個(gè)任務(wù)。
grunt.registerTask注冊(cè)完任務(wù)后吗浩，就可以執(zhí)行g(shù)runt命令了建芙，例如"grunt", "grunt default", "grunt uglify"等没隘。
現(xiàn)在的目錄結(jié)構(gòu)就是
四懂扼、插件介紹
Grunt的插件是有很多的，但是經(jīng)常用的，就那幾個(gè)阀湿，現(xiàn)在就總結(jié)一下赶熟，哈。
| 插件名稱 | 插件描述 |
|---|---|
| grunt-contrib-watch | 監(jiān)控文件有修改的時(shí)候陷嘴，運(yùn)行指定的任務(wù) |
| grunt-contrib-clean | 刪除指定的文件和文件夾 |
| grunt-contrib-copy | 復(fù)制指定的文件和文件夾 |
| grunt-contrib-uglify | 使用uglifyJS壓縮js文件 |
| grunt-contrib-jshint | 使用JSHint驗(yàn)證Js文件 |
| grunt-contrib-concat | 合并多個(gè)文件 |
| grunt-contrib-less | 將Less文件編譯成css文件 |
| grunt-contrib-cssmin | 壓縮css文件 |
目前這些就是最常用的插件映砖，用在項(xiàng)目上比較多，如果需要的話灾挨，可以上官網(wǎng)http://www.gruntjs.net/plugins來(lái)查看插件列表邑退。
五，總結(jié)
Grunt的使用大概就是這樣劳澄，到這里應(yīng)該感覺(jué)到工程化的魅力地技，但是本人在實(shí)際開(kāi)發(fā)grunt是用得較少，因?yàn)橛術(shù)ulp的出現(xiàn)后秒拔，grunt我可以說(shuō)是棄用了莫矗，但是為什么我還要介紹grunt呢，其實(shí)就想大家對(duì)工程化中的任務(wù)管理task這個(gè)東西有一個(gè)了解砂缩，因?yàn)榈搅撕竺鎔ulp的使用作谚，也是和grunt差不多，可能就是一些配置上的寫法差異庵芭，到這里妹懒，希望大家多練習(xí)一下，跟著例子喳挑，搭建一個(gè)屬于自己的一個(gè)grunt工程化項(xiàng)目彬伦，以后就可以復(fù)用你自己搭建的工程化項(xiàng)目來(lái)進(jìn)行開(kāi)發(fā)了。
?上圖就是Grunt的Logo伊诵，大家請(qǐng)認(rèn)識(shí)下单绑，以后可以適當(dāng)?shù)脑诿嬖囇b裝逼，哈曹宴。
