菜鸟进阶——grunt

开始学习 Grunt

它就是一个工具框架，有很多插件扩展它的功能。

是一套前端自动化工具，基于nodeJS的命令行工具，一般用于：

① 压缩文件

②合并文件

③简单语法检查

Grunt 基于 Node.js ，用 JS 开发，这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件们，都作为一个 包 ，可以用 NPM 安装进行管理。

所以 NPM 生成的 package.json 项目文件，里面可以记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。

如果你对 Node.js、NPM 这些名词不太熟悉，建议先去搜索了解一下，因为下面的命令会涉及到它们，但是本文不会过多介绍。

安装 Grunt

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。（可在官网上下载）然后开始安装 Grunt。

实际上，安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身。

安装 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范围安装 Grunt-cli ，换句话说，就是你可以在任何地方执行 grunt 命令：

npm install -g grunt-cli

需要注意，因为使用 －g 命令会安装到全局，可能会涉及到系统敏感目录，如果用 Windows 的话，可能需要你用管理员权限，如果用 OS X ／ Linux 的话，你可能需要加上 sudo 命令。

下面我们新建一个项目目录，并新建一些文件，这里我准备了一份很简单的项目，放在了 Github 上，下面操作将以此来操作，你可以下载或者 clone 下来： https://github.com/yujiangshui/gruntxx

生成 package.json 文件

这个 package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：

打开命令行，cd gruntxx 文件夹下面，输入指令 npm init 之后，就出来很多信息，然后开始填写项目名称，填写好了之后回车即可。其实这里你一路回车下去也无妨，但是建议你细细的填一下，不明白的跳过好了。

填写好了之后，查看目录就会发现生成 package.json 文件了，这样就算生成好了。

其实就是一个文件而已，你觉得这种方式麻烦，完全可以新建一个文件，然后将类似下面的代码复制进去，改一下对应选项，保存成 package.json 文件就可以：

{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { } }

最后我生成的代码如下：

但这时我们还没有在项目文件中安装 Grunt 以及相关任务插件。

安装 Grunt 和所需要的插件

就现在的这个示例项目而言，我打算让 Grunt 帮忙实现下面几个功能：检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。

差不多就是这些，根据这些任务需求，需要用到：

• 合并文件：grunt-contrib-concat
• 语法检查：grunt-contrib-jshint
• Scss 编译：grunt-contrib-sass
• 压缩文件：grunt-contrib-uglify
• 监听文件变动：grunt-contrib-watch
• 建立本地服务器：grunt-contrib-connect

它们的命名和文档都很规范，因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包，比如 grunt-contrib-concat - npm 你也可以在这上面看到用法等。

下面我们就要在这个项目中安装这些插件，执行命令：

npm install grunt --save-dev

表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。不信你打开 package.json 文件看下，是不是多了

"devDependencies": { "grunt": "^0.4.5" }

没错，这个的意思就是当前项目依赖 grunt，后面是它的版本，咱们不用管。如果安装的时候没有添加 —save-dev 参数，这里就不会出现了，你需要自行添加上去。

下面我们来安装 Grunt 的插件，当然，不需要一个个的安装，太麻烦了，我们可以：

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

等待一大串乱七八糟的下载状态，我们把 grunt 和相关插件都安装好了，不信看下是不是多了一个 node_modules 文件夹？打开看下，里面就是咱们刚安装的插件。

配置 Gruntfile.js 的语法

插件也装好了，开始写任务吧！既然是要程序来读取执行，必要要有一定的语法规范，下面来简单的说一下：

首先要明白，这是一个 JS 文件，你可以写任意的 JS 代码，比如声明一个 对象 来存储一会要写任务的参数，或者是一个变量当作开关等等。

然后，所有的代码要包裹在

module.exports = function(grunt) { ... };

里面。没有为什么。

在这里面的代码，除去你自己写的乱七八糟的 JS，与 Grunt 有关的主要有三块代码：任务配置代码、插件加载代码、任务注册代码。

顾名思义，这三块代码，任务配置代码就是调用插件配置一下要执行的任务和实现的功能，插件加载代码就是把需要用到的插件加载进来，任务注册代码就是注册一个 task，里面包含刚在前面编写的任务配置代码。

这样，就可以用 grunt 来执行注册的一个 task 从而根据任务配置代码调用需要的插件来执行相应的操作。

下面来分别看一下这三块代码的写法。

任务配置代码

例如下面代码：

可以看出，具体的任务配置代码以对象格式放在 grunt.initConfig 函数里面，其中先写了一句 pkg: grunt.file.readJSON(‘package.json‘) 功能是读取 package.json 文件，并把里面的信息获取出来，方便在后面任务中应用（例如下面就用了