Grunt入门教程(自动任务运行器)

在Javascript的开发过程中，经常会遇到一些重复性的任务，比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常，我们需要使用不同的工具，来完成不同的任务，既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具，可以帮助我们自动管理和运行各种任 务。

简单说，Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担。

## 安装

Grunt基于Node.js，安装之前要先安装Node.js，然后运行下面的命令。

sudo npm install grunt-cli -g

grunt-cli表示安装的是grunt的命令行界面，参数g表示全局安装。

Grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应的模块。这些模块应该采用局部安装，因为不同项目可能需要同一个模块的不同版本。

首先，在项目的根目录下，创建一个文本文件package.json，指定当前项目所需的模块。下面就是一个例子。

{ “name”: “my-project-name”, “version”: “0.1.0”, “author”: “Your Name”, “devDependencies”: { “grunt”: “0.x.x”, “grunt-contrib-jshint”: ““, “grunt-contrib-concat”: “~0.1.1”, “grunt-contrib-uglify”: “~0.1.0”, “grunt-contrib-watch”: “~0.1.4” } }

上面这个package.json文件中，除了注明项目的名称和版本以外，还在devDependencies属性中指定了项目依赖的grunt模 块和版本：grunt核心模块为最新的0.x.x版，jshint插件为最新版本，concat插件不低于0.1.1版，uglify插件不低于 0.1.0版，watch插件不低于0.1.4版。

然后，在项目的根目录下运行下面的命令，这些插件就会被自动安装在node_modules子目录。

npm install

上面这种方法是针对已有package.json的情况。如果想要自动生成package.json文件，可以使用npm init命令，按照屏幕提示回答所需模块的名称和版本即可。

npm init

如果已有的package.json文件不包括Grunt模块，可以在直接安装Grunt模块的时候，加上—save-dev参数，该模块就会自动被加入package.json文件。

npm install <module> —save-dev

比如，对应上面package.json文件指定的模块，需要运行以下npm命令。

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

## 命令脚本文件Gruntfile.js

模块安装完以后，下一步在项目的根目录下，新建脚本文件Gruntfile.js。它是grunt的配置文件，就好像package.json是npm的配置文件一样。Gruntfile.js就是一般的Node.js模块的写法。

module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ jshint: { / jshint的参数 / }, concat: { / concat的参数 / }, uglify: { / uglify的参数 / }, watch: { / watch的参数 / } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks(‘grunt-contrib-jshint'); grunt.loadNpmTasks(‘grunt-contrib-concat'); grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask(‘default', [‘jshint', ‘concat', ‘uglify']); grunt.registerTask(‘check', [‘jshint']); };

上面的代码用到了grunt代码的三个方法： grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。 grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。default任务名表示，如果直接输入grunt命令，后面不跟任何参数，这时所调用的模块（该例为 jshint，concat和uglify）；该例的check任务则表示使用jshint插件对代码进行语法检查。
上面的代码一共加载了四个模块：jshint（检查语法错误）、concat（合并文件）、uglify（压缩代码）和watch（自动执行）。接下来，有两种使用方法。

（1）命令行执行某个模块，比如

grunt jshint

上面代码表示运行jshint模块。

（2）命令行执行某个任务。比如

grunt check

上面代码表示运行check任务。如果运行成功，就会显示“Done, without errors.”。

如果没有给出任务名，只键入grunt，就表示执行默认的default任务。

## Gruntfile.js实例：grunt-contrib-cssmin模块

下面通过cssmin模块，演示如何编写Gruntfile.js文件。cssmin模块的作用是最小化CSS文件。

首先，在项目的根目录下安装该模块。

npm install grunt-contrib-cssmin —save-dev

然后，新建文件Gruntfile.js。