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

这个样例基本可以对付大多数任务了，具体详细的配置可以看官方文档