Grunt學習

一、配置grunt命令

npm install -g grunt-cli

二、配置package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

三、安裝Grunt及其插件
安裝Grunt

npm install grunt --save-dev

安裝插件

npm install grunt-contrib-jshint --save-dev

插件列表
四、配置Gruntfile.js文件

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'
      }
    }
  });

  // 加載包含 "uglify" 任務的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默認被執行的任務列表。
  grunt.registerTask('default', ['uglify']);

};

步驟

• "wrapper" 函數，全部的配置函數必須放在wrapper內

module.exports = function(grunt) {
  // Do grunt-related things in here
};

• 具體配置一個功能（以壓縮代碼爲例）

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

• 加載插件和任務

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

• 自定義任務

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

五、最後build代碼

• 將命令行的當前目錄轉到項目的根目錄下。
• 執行npm install命令安裝項目依賴的庫。
• 執行 grunt 命令

最後，教程地址：http://www.gruntjs.net/getting-started