Web的自动化开发---grunt介绍

简单介绍grunt：

• Grunt 是一个 JavaScript 自动化任务处理工具，是一个工具框架，有很多插件扩展它的功能。当我们需要做大量的重复工作时，比如：压缩／缩小／单元测试等，Grunt能够自动化（automation）地帮我们完成这些工作。
• Grunt 基于Node.js，Grunt及它的插件都作为一个包，可以用NPM安装进行管理，所以，NPM生成的package.json项目文件，记录当前项目中用到的 Grunt 插件。
• Grunt会调用Gruntfile.js文件，解析里面的任务并执行相应操作，需要安装Grunt-cli，也就是命令行的 Grunt，当然 Grunt-cli安装的并不是Grunt 。

安装及配置步骤：

1. 安装nodejs

官网下载 node-v4.2.2.pkg,按照后，同时安装了node 和npm，它将在你的机器上安装 Node.js和 npm (node package manager)。

2. 安装grunt-cli

 “CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npminstall…”进行安装。打开控制台（注意：windows系统下请使用管理员权限打开），输入：npm install -g grunt-cli，注意，mac os系统、部分linux系统中，在这句话的前面加上“sudo ”指令。安装完成后，这时候要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果：

你不要管这些结果是什么意思，总之出现这些提示，证明你的grunt-cli安装成功了。注意：我们可以在机器上同时安装多个不同版本的Grunt（package.json）。Grunt CLI用来运行配置好Gruntfile.js的Grunt。

3. 创建项目结构 

Grunt是应用于实际项目的，所以我们得有一个简单的测试网站来演示grunt的安装、使用。首先，我在Documents目录下面建了一个“grunt_test”文件夹，里面建了三个空文件夹、两个空文档，名称如下图。（注意 Gruntfile.js 文件的首字母大写！）

执行如下命令:

目录结构如下：

其他的东西先不要管，先把package.json这个文件写一些东西。记住，既然文件后缀名叫“json”，那么文件中的格式肯定是严格的json格式。package.json内容如下所示，否则，无法将grunt及插件信息写入package.json中的“devDependencies”。package.json可以使用npm init命令来创建，过程中需要回答一些配置问题。

4. 安装grunt

接下来我们会有一系列插件的安装，他们的安装过程和grunt一样。但是他们的执行都是基于grunt的，因此才能把grunt叫做一个“构建工具”。Grunt没有具体的作用，但是它能把有具体作用的一个一个插件组合起来，形成一个整体效应。

注意，这里安装grunt不再是全局安装了，需要你在控制台进入到网站或系统的具体目录下。这里我们进入grunt_test目录下。然后输入以下命令，npm install grunt --save-dev，执行成功，则如下图所示，解释的是，“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项，即写入package.json中的“devDependencies”。

现在第一时间打开package.json去看看，那里的“devDependencies”有什么变化。我这里的变化如下图，看看你的是不是和我的一样？

然后，你再看看文档目录中的文件或者文件夹有什么变化？我这里多了一个“node_modules”文件夹，其中有一个“grunt”文件夹，其中有若干文档。这里就是存储grunt源文件的地方。

现在命令行运行grunt，如下图所示，表示grunt已经在这个目录下成功安装。

那么，为何我们在刚才执行grunt时候会有Warning提示呢？根据提示，我们得知的信息是：Task “default” not found ，如何搞定这个问题？——我们继续往下看啊。

注意：区别devDependencies和dependencies，如果你不想用devDependencies，安装的时候使用npm install –production，更多区别可以查看http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies

5. 配置gruntfile.js

Gruntfile配置文件包含4部分：

• 一个包装（wrapper）函数
• 项目和任务配置（grunt .initConfig）
• 加载grunt插件及任务
• 自定义任务

根据需要，首先将gruntfile.js设置为如下格式：

此时，再运行grunt，显示如下所示，表示配置成功，但是我们并没有引入插件，继续往下进行。

6. grunt插件介绍

进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ，我们能看到grunt到目前位置的所有插件。现在里面有6179个插件，这个数量每天都在增加。

插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。

咱们主要用到以下插件：

• Contrib-jshint——javascript语法错误检查；
• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
• Contrib-clean——清空文件、文件夹；
• Contrib-uglify——压缩javascript代码
• Contrib-copy——复制文件、文件夹
• Contrib-concat——合并多个文件的代码到一个文件中
• karma——前端自动化测试工具

7. uglify插件介绍

Uglify插件的功能就是压缩javascript代码。至于javascript代码压缩的必要和意义，这里就不用在赘述了吧？几乎每一个javascript类库或者框架都有一个 **.min.js 压缩版。

要安装一个插件，首先要进入这个插件在grunt官网的说明文档页面。我们在grunt官网插件列表页面，找到“contrib-uglify”点击进入。你要看这里面的说明，然后根据说明进行安装。这里我们只讲重点。

安装uglify插件的方式，和安装grunt是一样的。如下：npm install grunt-contrib-uglify --save-dev

这里又出现了熟悉的“—save-dev”，具体的作用在上文安装grunt时已经说过了，不再赘述。运行这句命令。安装完成之后，你会看到package.json中“devDependencies”节点的变化，以及“node_modules”文件夹里的变化。现在还不能用，还需要在Gruntfile.js做配置。我们既然要使用uglify来压缩javascript代码，当然得创建一个js文件来做实验。我们在现有的“src”文件夹中新建一个文件夹“lib”和“utility”，分别存放“angular.js”和“test.js” 。

测试文件建立好了。我们接下来就要把这两个js文件进行压缩。当然，要压缩谁？往哪里压缩？这些都需要配置，在Gruntfile.js中配置。分为三步：

第一步，在grunt.initConfig方法中配置 uglify的配置参数。如下图：

上图中，对uglify的配置有两项。

• “options”中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。注意，其中使用到了pkg获取package.json的内容。
• “target”中配置了源文件和目标文件，即规定了压缩谁？压缩之后会生成谁？
  
  这里只是对“options”和“target”的基本应用，还有许多使用方式，可以去官网查阅http://gruntjs.com/configuring-tasks。
  第二步，在grunt.initConfig 方法之后，要让grunt去加载这个插件。只配置，不加载，如何用那?
  
• 第三步，在grunt命令执行时，要不要立即执行uglify插件？如果要，就写上，否则不写。
  
  以上说的这三步已经OK了，接下来我们去试试。在控制台中运行grunt命令，看得到什么结果。控制台将输入如下信息：
       

再去看看，是否生成了2个压缩后的js文件？angular.min.js，如下所示：

 test.min.js，如下所示：

果然。根据package.json中的name和version生成了文件名。而且，压缩后的代码的banner也是符合Gruntfile.js中的配置要求的。

以上就是uglify插件的详细安装、配置说明。Javascript使用uglify压缩，css可使用cssmin插件压缩。安装、配置方法一样的，不再赘述。

8. 使用watch插件（真正实现自动化）

你可能一直有一个疑问，上面讲的插件中，每次执行插件功能，都得执行一遍“grunt”命令，这样的操作非常繁琐，说好的“自动化”呢？别着急，接下来就解决这个问题——通过watch插件解决这个问题。

首先安装watch插件，如果安装不再赘述了。接下来要配置watch插件，配置分为三个步骤，不再详细描述了，只贴图说明。

第一步。配置watch将监控哪些文件的变化，以及这些文件一旦变化，要立即执行哪些插件功能。如下图，watch将监控src文件夹下所有js文件的变化，一旦变化，则立即执行uglify这个插件功能。

第二步，

第三步，

这三步执行完了，即watch插件配置完成。运行grunt命令，控制台提示watch已经开始监听。此时要想停止，按ctrl + c即可。

既然在监听，我们试一试看监听有没有效。我们将 test.js 代码进行修改，结果显示，watch检查到了test.js文件的变化，并重新压缩test.js。