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