Grunt 基于 Node.js ，用 JS 開(kāi)發(fā)，這樣就可以借助 Node.js 實(shí)現(xiàn)跨系統(tǒng)跨平臺(tái)的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件們，都作為一個(gè) 包 ，可以用 NPM 安裝進(jìn)行管理。
所以 NPM 生成的 package.json 項(xiàng)目文件，里面可以記錄當(dāng)前項(xiàng)目中用到的 Grunt 插件，而 Grunt 會(huì)調(diào)用 Gruntfile.js 這個(gè)文件，解析里面的任務(wù)（task）并執(zhí)行相應(yīng)操作。

安裝 Grunt-cli
其實(shí)是安裝 Grunt-cli ，這里安裝Grunt的命令行支持（command line interface，簡(jiǎn)稱(chēng)CLI），在這之后，命令提示符中將會(huì)識(shí)別grunt命令。安裝grunt-cli 并不能稱(chēng)為安裝Grunt完畢。這是因?yàn)?，Grunt本身不是全局使用的，任何具體的工作目錄，如果要使用Grunt，都需要安裝一次Grunt。這樣做也是因?yàn)椴煌墓ぷ髂夸洠枰ㄟ^(guò)Grunt做的自動(dòng)化工作也不同，因此需要獨(dú)立配置。

npm install -g grunt-cli

—save-dev 參數(shù)，表示會(huì)把剛安裝的東西添加到 package.json 文件中。

生成 package.json 文件
npm對(duì)工作目錄有一個(gè)要求。這個(gè)要求是：根目錄位置處有一個(gè)package.json
文件。這個(gè)文件定義了工作目錄對(duì)應(yīng)的一些項(xiàng)目信息（名字，描述），以及包（就是npm模塊）依賴(lài)關(guān)系。
執(zhí)行下面命令便可以初始化

npm init

為當(dāng)前工作目錄安裝Grunt和需要的插件
方法1
之前我們把Grunt安裝到了全局目錄下，現(xiàn)在需要引入到當(dāng)前項(xiàng)目路徑，與此同時(shí)，所需要的插件可能有這些：

合并文件：grunt-contrib-concat
語(yǔ)法檢查：grunt-contrib-jshint
Scss 編譯：grunt-contrib-sass
壓縮文件：grunt-contrib-uglify
監(jiān)聽(tīng)文件變動(dòng)：grunt-contrib-watch
建立本地服務(wù)器：grunt-contrib-connect
安裝它們的方式可以是：

npm install --save-dev grunt
npm install --save-dev 插件1 插件2 插件3

這個(gè)時(shí)候package.json文件夾里多出了一些代碼。

"devDependencies": {
 "grunt": "0.4.1"
},

方法2-手動(dòng)更改package.json

"devDependencies": {
　　"grunt": "~0.4.1",
　　"grunt-contrib-cssmin": "~0.7.0"
　}

手動(dòng)在package.json文件里面添加這個(gè)字段，將需要依賴(lài)的包添加進(jìn)去，如果只需安裝最新版本，可以改成 * ，然后執(zhí)行npm install，會(huì)發(fā)現(xiàn)文件夾里多了node_modules文件夾，里面存放的就是我們需要的插件。

配置
一般來(lái)說(shuō)，直接使用模板作為配置文件。

module.exports = function(grunt) {
 "use strict";
 grunt.initConfig({
 //插件配置區(qū)域
 });
 //加載插件任務(wù)，要使用誰(shuí)就添加誰(shuí)
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-imagemin');
 // 注冊(cè)任務(wù)
 grunt.registerTask('default', ['cssmin', 'imagemin', 'uglify']);
};

grunt.loadNpmTasks()是加載插件任務(wù)。其實(shí)就是說(shuō)，你如果要使用哪個(gè)插件的功能，請(qǐng)?jiān)谶@部分用這句代碼把插件任務(wù)添加進(jìn)去。
grunt.registerTask()是注冊(cè)任務(wù)，默認(rèn)有一個(gè)default。默認(rèn)的意思就是說(shuō)，你最后使用的時(shí)候，在目錄的命令提示符里直接輸入grunt便可以執(zhí)行注冊(cè)的任務(wù)，相當(dāng)于執(zhí)行了default這個(gè)任務(wù)。

使用自定義任務(wù)
可以注冊(cè)更多的任務(wù)命令，使用其他的命名。比如

grunt.registerTask('custom', ['cssmin', 'imagemin']);

對(duì)應(yīng)使用的時(shí)候，輸入：

grunt custom

最新評(píng)論