Grunt是為Node打造的項目構建工具,相當于C/C++世界中的makefile,可以執(zhí)行像壓縮、編譯、單元測試、代碼檢查以及打包發(fā)布的任務,下面我們就來一起看一下Node.js的項目構建工具Grunt的安裝與配置教程:

Grunt 基于 Node.js ，用 JS 開發(fā)，這樣就可以借助 Node.js 實現(xiàn)跨系統(tǒng)跨平臺的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件們，都作為一個 包 ，可以用 NPM 安裝進行管理。

所以 NPM 生成的 package.json 項目文件，里面可以記錄當前項目中用到的 Grunt 插件，而 Grunt 會調用 Gruntfile.js 這個文件，解析里面的任務（task）并執(zhí)行相應操作。

安裝 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

文件。這個文件定義了工作目錄對應的一些項目信息（名字，描述），以及包（就是npm模塊）依賴關系。

執(zhí)行下面命令便可以初始化

npm init

為當前工作目錄安裝Grunt和需要的插件

方法1

之前我們把Grunt安裝到了全局目錄下，現(xiàn)在需要引入到當前項目路徑，與此同時，所需要的插件可能有這些：

合并文件：grunt-contrib-concat

語法檢查：grunt-contrib-jshint

Scss 編譯：grunt-contrib-sass

壓縮文件：grunt-contrib-uglify

監(jiān)聽文件變動：grunt-contrib-watch

建立本地服務器：grunt-contrib-connect

安裝它們的方式可以是：

npm install --save-dev grunt

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

這個時候package.json文件夾里多出了一些代碼。

"devDependencies": {

 "grunt": "0.4.1"

},

方法2-手動更改package.json

"devDependencies": {

　　"grunt": "~0.4.1",

　　"grunt-contrib-cssmin": "~0.7.0"

　}

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

配置

一般來說，直接使用模板作為配置文件。

module.exports = function(grunt) {

 "use strict";

 grunt.initConfig({

 //插件配置區(qū)域

 });

 //加載插件任務，要使用誰就添加誰

 grunt.loadNpmTasks('grunt-contrib-uglify');

 grunt.loadNpmTasks('grunt-contrib-cssmin');

 grunt.loadNpmTasks('grunt-contrib-imagemin');

 // 注冊任務

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

};

grunt.loadNpmTasks()是加載插件任務。其實就是說，你如果要使用哪個插件的功能，請在這部分用這句代碼把插件任務添加進去。

grunt.registerTask()是注冊任務，默認有一個default。默認的意思就是說，你最后使用的時候，在目錄的命令提示符里直接輸入grunt便可以執(zhí)行注冊的任務，相當于執(zhí)行了default這個任務。

使用自定義任務

可以注冊更多的任務命令，使用其他的命名。比如

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

對應使用的時候，輸入：

grunt custom