前端自动化工具Grunt的使用

一、什么是Grunt

Grunt 是一个基于任务的JavaScript工程命令行构建工具。

上面这句看起来可能还不足以了解Grunt，下面举个例子：

*我们的前端代码有非常多的js文件，这些文件在最后发布版本的时候，往往希望能将他们压缩后再发布，因为压缩后的js文件在网络传输时能减少流量，加快访问速度，这时候Grunt就派上用场了，Grunt中的Uglify插件，可以很轻松的帮助我们实现js文件的压缩。

*有时候几个js文件可以合并到一起减少网络请求的次数，这时候Grunt中的concat插件就应运而生了。

*当某个js文件被修改了，怎么知道有没有语法错误呢？Grunt中的watch插件和jshint插件，就可以帮助我们监控某个js文件是否被修改，如果被修改了，可以马上审查它的代码有没有有语法错误，有错误的话，会马上显示出来。

上面举的3个例子应该足以说明什么是Grunt了吧，当然。Grunt有很多的插件可以帮助我们自动完成一些事情，上面只是举了4个插件例子而已

二、Grunt的使用

要使用Grunt和Grunt插件，我们需要使用npm命令，所以需要先安装Nodejs，这里假设Nodejs已经安装完毕，使用下面的命令可以安装Grunt：

npm install -g grunt-cli

安装完毕后，我们新建一个项目，用来测试Grunt的使用方法。

（1）在桌面新建目录TestGrunt，并在TestGrunt目录中新建两个文件：package.json和Gruntfile.js，其中：
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

下面放上package.json的代码：

{  "name": "TestGrunt",  "version": "0.1.0",  "devDependencies": {    "grunt": "^0.4.5",    "grunt-contrib-concat": "^1.0.1",    "grunt-contrib-jshint": "^0.12.0",    "grunt-contrib-uglify": "^0.5.1",    "grunt-contrib-watch": "^1.0.0"  }}

上面的代码中，name指定了项目的名称，version指定了项目的版本，devDependencices指定了Grunt插件。

（2）使用npm安装插件。插件除了需要在package.json中声明外，还需要通过npm命令来进行安装，命令格式为：

npm install <module> --save-dev

由于本文的例子里使用到了4个Grunt插件，所以我们需要在命令行下依次执行下面4条命令：

npm install grunt-contrib-jshint --save-devnpm install grunt-contrib-concat --save-devnpm install grunt-contrib-watch --save-devnpm install grunt-contrib-uglify --save-dev

（3）编写Gruntfile文件。上面两步准备工作做好了，就开始真正的重任了，由于Grunt是以任务的形式来为我们自动完成某些工作的，所以在Gruntfile中，我们需要配置任务，下面先上Gruntfile的代码，然后再一一说明：

module.exports = function(grunt) {  // 项目配置  grunt.initConfig({    //从package.json中读取配置    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'      }    },    //代码提示    jshint: {      files: ['src/TestGrunt.js'],      reportOutput: ''    },    //文件监视    watch: {      files: ['src/<%= pkg.name %>.js'],      tasks: ['jshint']    },    //文件合并    concat: {      dist: {        src: ['src/a.js', 'src/b.js'],        dest: 'build/ab.js'      }    }  });  // 加载插件。  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-jshint');  grunt.loadNpmTasks('grunt-contrib-watch');  grunt.loadNpmTasks('grunt-contrib-concat');  // 默认被执行的任务列表。  grunt.registerTask('default', ['uglify', 'watch', 'jshint', 'concat']);};

上面的Gruntfile代码中，配置了4个任务，下面依次说明：

（1）

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

这句代码是每一份Gruntfile都必须遵循的格式，所有的任务配置都必须放在上面的函数内部

（2）

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

这句代码表示grunt需要从package.json中读取一些配置文件，这里的package.json就是我们在项目根目录下创建的那个package.json文件

（3）压缩任务：

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

上面的代码配置了压缩任务，其中option指定了压缩任务的一些选项，这里配置的banner会在压缩后的文件头部显示出来。build中配置了src和dest两个属性，src指定了被压缩文件的路径，<%= pkg.name%>为字符串模板，实际运行grunt任务时，这部分将会被替换成pkg.name代表的字符串，而pkg.name即我们在package.json中配置的name属性。

（4）语法提示任务：

jshint: {  files: ['src/TestGrunt.js'],},

这段代码配置的是代码提示任务，即检查并提示src/TestGrunt.js文件的语法错误

（5）文件内容监控任务：

watch: {  files: ['src/<%= pkg.name %>.js'],  tasks: ['jshint']},

这段代码配置的是文件监控任务，当files中指定的js文件内容发生变化时，就会自动运行tasks指定的任务，这里的tasks指定了jshint任务，则TestGrunt.js文件内容发生改变后，就会自动检查TestGrunt.js文件的语法是否有误。

（6）文件合并任务：

concat: {  dist: {    src: ['src/a.js', 'src/b.js'],    dest: 'build/ab.js'  }}

这段代码配置的是文件合并任务，src数组指定哪些文件需要合并，dest指定的是合并后的文件路径。

（7）加载插件：

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

前面几步配置好任务后，需要使用上面的代码将插件加载进来，需要注意的是，这里加载的插件，要确保我们已经使用npm命令将其安装了，如果是没有安装的插件，加载肯定不会成功的。

（8）注册任务：

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

上面这句代码注册了一个默认的任务数组，该任务数组包含了4个任务，当我们在命令行下执行grunt命令时，如果没有指定任务名称，则这里的默认的任务会被执行，如果我们在grunt命令后带了任务名称，则会执行指定的任务，比如下面的命令：

grunt concat

则会只执行concat任务。

三、测试Grunt

上面的步骤完了之后，基本上就可以测试Grunt的威力了，为了测试Grunt的能力，我们还需要给TestGrunt项目加上一些测试用的js文件，在TestGrunt目录下新建src目录，然后在src目录下新建3个js文件分别如下：

a.js:

function a() {alert("a");}

b.js:

function b() {console.log("b");}

TestGrunt.js:

function test() {console.log("Hello World!");console.log("helloworld");console.error("error!")}

OK了，下面就可以测试Grunt的插件是否运行正常了，我们在命令行下进入TestGrunt目录，然后执行grunt concat命令，如下图所示：

可以看到，命令执行成功了，而且在TestGrunt目录下，自动生成了build目录，build目录下出现了ab.js文件，文件内容为：

function a() {alert("a");}function b() {console.log("b");}

这样一来，就证明concat插件正常工作了，而且将a.js和b.js成功合并成了一个文件ab.js。

下面在命令行中执行grunt uglify命令，如下图所示：

然后在build目录下，可以看到生成了TestGrunt.min.js文件，文件内容如下：

/*! TestGrunt 2016-08-17 */function test(){console.log("Hello World!"),console.log("helloworld"),console.error("error!")}

这就表明代码压缩插件uglify已经正常运行并生成了压缩后的文件。

下面在命令行下执行grunt watch命令，如下图所示：

可以看到命令行出现Waiting...字样，接下来我们打开项目src目录中的TestGrunt.js文件，并修改代码如下：

function test() {console.log("Hello World!");console.log("helloworld");console.error("error!")alert()}

修改完代码后，我们保存文件，然后来到命令行下，发现命令行下多了一些内容，如下图所示：

这里我们可以发现，命令行中提示了TestGrunt.js文件中的两处错误，这就表明Grunt插件watch和jshint正常运行了，因为我们修改了TestGrunt.js文件，所以插件watch的任务被执行，而在上面的Gruntfile中我们配置的是，文件改变后就执行jshint任务，所以在命令行下才会出现错误提示。这里需要注意的是，修改了TestGrunt.js文件后，只有保存文文件后watch才能监控到文件的改变。

上面就是Grunt4个插件：concat、uglify、jshint、watch的使用，当然，这里只是一个简单的使用demo，实际这几个插件还有很多配置项，可以参考Grunt官方文档：http://www.gruntjs.net/getting-started

Grunt常用插件整理：http://www.jianshu.com/p/2d5249914460

本文的demo代码已上传，点击这里下载