前端開發神器：grunt快速入門

grunt是什麼？

grunt是一個基於nodejs的task runner，簡單來講，就是相似於.net平臺的msbuild以及java平臺的maven。

grunt能作什麼？

grunt可使你的項目中重複的任務，好比壓縮，語法檢查，編譯（好比LESS預處理，coffeescript編譯），單元測試等變得更加簡單。

安裝

由於grunt是基於node.js的，因此咱們首先要安裝node.js以及node.js的包管理工具npm。

windows 平臺下只要在NODE.JS官方下載MSI安裝包，直接安裝，node.js以及npm就能直接裝好。

Linux平臺下，由於一些發行版軟件源的node.js版本想對比較低，grunt 0.4又要求node.js的版本要>=0.8.0，所以我推薦編譯安裝。

安裝完成node.js之後，就能夠開始安裝npm，grunt以及grunt-cli了。

sudo apt-get -y install npm
sudo npm install -g grunt
sudo npm install -g grunt-cli

Getting started

配置文件

grunt須要兩個配置文件：Gruntfile.js以及package.json。

Gruntfile.js

Gruntfile.js要放在項目的根文件夾下，用於配置grunt要運行的任務：

module.exports = function( grunt ) {
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
        options: {
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
          src: 'src/<%= pkg.name %>.js',
          dest: 'build/<%= pkg.name %>.min.js'
        }
      }
    });
    grunt.loadNpmTasks('grunt-jsdoc');
}

NOTE：

經過<%%>模板字符串能夠引用任何的配置屬性，好比<%=pkg.name%>

經過grunt提供的API方法loadNpmTasks，咱們能夠加載grunt的插件

grunt.loadNpmTasks('grunt-jsdoc');

package.json

package.json用來存放項目的元數據，好比項目的版本，項目許可證書——好比MIT，GPL啥的，做者，項目依賴的庫等：

{
  "name": "ui",
  "version": "1.0.0",
  "description": "",
  "main": "ui.min.js",
  "directories": {
    "doc": "doc"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "keywords": [
    "javascript",
    "ui",
    ""
  ],
  "author": "",
  "license": "BSD",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-jsdoc": "~0.4.0",
    "grunt-contrib-copy": "~0.4.1"
  }
}

當你準備開始使用grunt去作一個新項目的時候，你可使用npm init來建立一個基本的package.json文件。

grunt的任務

Grunt就只支持兩種任務，分別是基本的Task以及MultiTasks。這二者的區別是：Basic Task的任務配置只有一個，而MultiTasks的任務配置則有多個。

默認狀況下，若是沒有指定MultiTasks要使用的目標配置，那麼實際執行任務的時候，grunt會加載而且執行全部的任務配置。大多數的grunt插件任務都是MultiTasks。

咱們以grunt-jsdoc插件做爲例子，實際觀察一下MultiTasks的運行：

// grunt-jsdoc插件的任務配置
jsdoc: {
    dev : {
        src: jsdoc_src, 
        options: {
            template : 'templates/ebaui',
            private    : false,
            destination: 'build/doc/',
            tutorials  : 'build/demo/'
        }
    },
    release : {
        src: jsdoc_src, 
        options: {
            template : '',
            private    : false, 
            destination: '../release/<%=pkg.version%>/doc/',
            tutorials  : 'build/demo/'
        }
    }
}

沒有指定任務的目標配置

運行任務：

grunt jsdoc

在console裏會輸出以下結果：

Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Running "jsdoc:release" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\release\1.0.0\doc
Done, without errors.

指定任務的目標配置

運行任務：

grunt jsdoc:dev

在console裏會輸出以下結果：

Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Done, without errors.

編寫grunt任務

grunt全局命名空間下，提供瞭如下兩個和定義任務有關的API：

//  Alias task
grunt.registerTask(taskName, taskList)
//  Function task
grunt.registerTask(taskName, description, taskFunction)
//  multi task
grunt.registerMultiTask(taskName, description, taskFunction)

registerTask

// Default task(s).
var defaultTasks = [
    'build_js:dev',
    'build_themes:dev',
    'copy:dev',
    'build_template:dev'
];
grunt.registerTask('default', defaultTasks);

registerMultiTask

grunt.registerMultiTask('cp_phpdemo','',function(){
    log( ' task ' + this.target + ' start......' );
    var config   = this.data;
    var source   = grunt.file.expand( this.data.src );
    var dest     = this.data.dest;
    if( source && source.length > 0 ){

        source.forEach( function( item ) {
            var filename = path.basename( item );
            copyfile( item, dest+filename );
        } );

    }
    log( ' task ' + this.target + ' end......' );
});

運行grunt任務

//  默認執行default任務
grunt
//  加載jsdoc全部任務配置，而且以每一個配置去執行jsdoc任務
grunt jsdoc
//  指定使用dev的任務配置，而且以這個配置去執行jsdoc任務
grunt jsdoc:dev