Grunt 簡單入門

Grunt 是一個基于Nodejs的自動化任務執行工具。那么什么是任務執行工具呢，其實就是按照之前編定好的規則執行任務的一個工具。

下面是Grunt的簡單使用方法。

安裝Grunt

首先要安裝nodejs（包含npm）。通過 npm install -g grunt來安裝grunt。這個命令僅僅安裝了grunt命令行接口（grunt-cli），還不能在文件夾里運行，需要配置完成才可以。

配置Grunt

Grunt要向運行必須得在在文件夾根目錄下找到配置文件 Gruntfile.js， 而 Gruntfile.js依賴與nodejs的配置文件 package.json 。所以項目根目錄下得有package.json 和 Gruntfile.js兩個配置文件。package.json可以通過 node init來生成，而 Gruntfile.js好像得手工創建。

Gruntfile.js內的代碼包括四個主要元素：

• 包裹函數
• 項目和任務配置
• 加載Grunt插件和任務
• 自定義任務

下面先貼上整體配置文件再一一分析

module.exports = function(grunt) {

  // Project configuration.
  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'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

其中

module.exports＝ function (grunt) {
}

既為包裹函數，其內部的

grunt.initConfig({})

就是Grunt 項目配置函數。這個對象{}既為配置對象。配置對象內又有各個 任務的配置。
其中 pkg:grunt.file.readJSON('package.json')是讀取根目錄總的pakcage.json文件，作為配置對象的一個屬性 pkg，以方便后面的配置使用。

uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }

就是一個任務配置對象，屬性名必須與插件名稱一致。其中的 options是這個任務的 任務級配置，build是一個 目標，一個任務可以包含多個目標，目標名稱命名規范與js命名規范一樣（也就是說可以隨意取）。每個目標內還可以有 目標級配置。
目標內的 src屬性為源文件，dest為目標文件（保存任務執行結果）。
<% %>是模版，模版內可以運行javascript代碼，可以訪問任務配置對象內的屬性。

項目配置完成后需要加載Grunt插件 grunt.loadNpmTasks('grunt-contrib-uglify')
最后是自定義任務（可選） grunt.registerTask('default', ['uglify']);

執行Grunt任務

運行之前要確保Gruntfile.js中加載的插件已經安裝了，如果為安裝可以通過 npm install 插件名 --save-dev來安裝，例如： npm install grunt-contrib-ublify --save-dev。
如果像上面一樣配置了自定義任務，直接運行 grunt就可以執行 uglify任務了。如果沒有配置default，則需要 grunt uglify 來執行 uglify任務。執行 uglify任務時會按順序執行它的各個目標，亦可以通過 grunt uglify:build來單獨執行某個目標。

官方樣例

這里再貼一個官方提供的 Gruntfile.js樣例

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

這個樣例基本可以對付大多數任務了，具體詳細的配置可以看官方文檔