Grunt 基于 Node.js 亡脸,用 JS 開發(fā),這樣就可以借助 Node.js 實現(xiàn)跨系統(tǒng)跨平臺的桌面端的操作树酪,例如文件操作等等浅碾。此外,Grunt 以及它的插件們续语,都作為一個 包 垂谢,可以用 NPM 安裝進行管理。
所以 NPM 生成的 package.json 項目文件疮茄,里面可以記錄當(dāng)前項目中用到的 Grunt 插件滥朱,而 Grunt 會調(diào)用 Gruntfile.js 這個文件,解析里面的任務(wù)(task)并執(zhí)行相應(yīng)操作力试。
安裝 Grunt-cli
其實是安裝 Grunt-cli 徙邻,這里安裝Grunt的命令行支持(command line interface,簡稱CLI)畸裳,在這之后羊苟,命令提示符中將會識別grunt命令残制。安裝grunt-cli 并不能稱為安裝Grunt完畢微酬。這是因為凛俱,Grunt本身不是全局使用的装诡,任何具體的工作目錄陶缺,如果要使用Grunt跪但,都需要安裝一次Grunt凉当。這樣做也是因為不同的工作目錄夯到,需要通過Grunt做的自動化工作也不同嚷缭,因此需要獨立配置。
npm install -g grunt-cli
—save-dev 參數(shù)耍贾,表示會把剛安裝的東西添加到 package.json 文件中阅爽。
生成 package.json 文件
npm對工作目錄有一個要求。這個要求是:根目錄位置處有一個package.json
文件荐开。這個文件定義了工作目錄對應(yīng)的一些項目信息(名字付翁,描述),以及包(就是npm模塊)依賴關(guān)系晃听。
執(zhí)行下面命令便可以初始化
npm init
為當(dāng)前工作目錄安裝Grunt和需要的插件
-
方法1
之前我們把Grunt安裝到了全局目錄下百侧,現(xiàn)在需要引入到當(dāng)前項目路徑砰识,與此同時,所需要的插件可能有這些:
- 合并文件:grunt-contrib-concat
- 語法檢查:grunt-contrib-jshint
- Scss 編譯:grunt-contrib-sass
- 壓縮文件:grunt-contrib-uglify
- 監(jiān)聽文件變動:grunt-contrib-watch
- 建立本地服務(wù)器:grunt-contrib-connect
安裝它們的方式可以是:
npm install --save-dev grunt
npm install --save-dev 插件1 插件2 插件3
這個時候package.json
文件夾里多出了一些代碼佣渴。
"devDependencies": {
"grunt": "0.4.1"
},
-
方法二-手動更改package.json
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0"
}
手動在package.json
文件里面添加這個字段辫狼,將需要依賴的包添加進去,如果只需安裝最新版本辛润,可以改成** * **膨处,然后執(zhí)行npm install
,會發(fā)現(xiàn)文件夾里多了node_modules
文件夾砂竖,里面存放的就是我們需要的插件真椿。
Gruntfile.js文件
具體看這篇文章
http://www.reibang.com/p/78d556cd621c
插件配置區(qū)域
這里其實就是用json語法具體配置一個插件如何去完成它所要執(zhí)行的任務(wù)。詳細(xì)配置看官網(wǎng)配置說明晦溪。
開始使用
只需要輸入grunt 任務(wù)名
便可以一切自動完成瀑粥。
使用淘寶鏡像加速
網(wǎng)址:http://npm.taobao.org/
查看配置信息
npm config list ls -l
使用淘寶鏡像之后,需要對
.cnpmrc
文件進行配置
prefix=D:
odejs
ode global
cache=D:
odejs
ode cache
添加這樣的話語
提示
- 如果全局目錄已經(jīng)有插件了三圆,不要直接強制覆蓋安裝狞换,可能會出現(xiàn)問題(無法寫入)。