一、grunt简介

grunt是什么？

grunt是Javascript世界的构建工具，我们的项目在创建初期，会很小，但经过很多版本的迭代，越来越大，CSS和JS都不太好管理了，这时我们需要工具来帮助我们管理，grunt就是做这个的。它主要的工具就是编译、压缩、单元测试等，以减少我们的工作量。

grunt已有很多可供我们使用的插件，帮助我们实现各种工业自动化，那如何使用grunt呢？

二、安装grunt

grunt和其插件都是通过npm安装的，所以，系统中必须安装npm，npm是NodeJS的包管理器。

liuzhendeMacBook-Air:gruntTest liuzhen$ npm -v
2.14.12

安装grunt之前必须先将grunt-cli安装到全局中（我这里使用了sudo命令来安装）

liuzhendeMacBook-Air:gruntTest liuzhen$ sudo npm install -g grunt-cli
Password:
npm WARN deprecated lodash@2.4.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.7)
└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
liuzhendeMacBook-Air:gruntTest liuzhen$

安装好grunt-cli并不是安装了grunt，grunt-cli的作用就是调用与grunfile同目录的grunt，这样做的好处就是不同的项目里可以存放不同版本的grunt。

三、package.json和gruntfile

在项目中安装grunt之前，一般都需要两个文件，package.json和gruntfile

package.json：

此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块进入项目目录，使用npm init命令来创建一   个基本的package.json，在创建完gruntfile之后，就可以在项目目录中使用

sudo npm install grunt --save-dev

来安装项目grunt，也可以使用

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

来安装grunt插件

gruntfile：

此文件可被定义为gruntfile.js或者gruntfile.coffee，用来配置或定义任务（task），并加载grunt插件。

一般它可以由以下几个部分组成：

1.“wrapper”函数，它包含整个grunt配置信息

module.exports = function(grunt) {}

在这个函数中初始化configuration对象

grunt.initConfig({});

接下来就可以从package.json中读取配置信息，并存入pkg属性中

pkg:grunt.file.readJSON('package.json')

好了，到目前为止我们可以看到如下的代码：

module.exports = function(grunt) {grunt.initConfig({pkg: grunt.file.readJSON('package.json')});
}

接下来，我们就可以为每个任务定义相应的配置。

2.项目与任务配置

首先，我们来配置concat，也就是文件合并任务，如下代码：

concat: {options: {//定义一个用于插入合并输出文件之间的字符separator: ';';},dist: {//将要被合并的文件src: ['src/**/*.js'],//合并后的JS文件的存放位置dest: 'dist/<%= pkg.name %>.js'}
}

接下来，我们配置uglify插件，也就是文件压缩

uglify: {options: {//此处定义的banner注释将插入到输出文件的顶部banner: '/* <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'},dist: {files: {'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']}}
}

QUnit插件用于测试文件，只要提供文件位置即可

qunit: {files: ['test/**/*.html']
},

JShint插件用于检查JS代码的合法性，配置也很简单

jshint: {//定义需要检查的文件的位置files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],//JSHint默认配置options: {globals: {jQuery: true,console: true,module: true}}
}

最后，来配置watch插件，它是用来监视当前文件变化，如果有变化，则grunt会自动执行代码检查

watch: {files: ['<%= jshint.files %>'],tasks: ['jshint', 'qunit']
}

3.加载grunt插件和任务

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插件需要通过npm进行安装，如以下代码：

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

4.自定义任务

最后，我们需要设置task，重要的是default任务：

//在命令行输入“grunt test”，test task就会被执行
grunt.registerTask('test', ['jshint', 'qunit']);
//在命令行上输入“grunt”，就会被执行的default task
grunt.resisterTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

下面，是最终完成的gruntfile文件代码：

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']},//JS代码检查jshint: {files: ['gruntfile.js', 'src/**/*.js', 'test/**/*js'],options: {//这里覆盖JSHint默认配置选项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']);
};

未完，待续。。。