grunt前端构建工具的使用

这几天学习了一下grunt，并运用到工作项目中，使用grunt的的目的在于提高工作效率，优化前端程序。

grunt前端构建工具一直都很火，很久之前就已经对它有了解，但一直没有真正运用到实际工作中，这几天刚好有了这个想法，就决定把它用到我的工作项目里面去。

首先需要了解的是，grunt和grunt的插件都是通过npm安装并管理的，npm是node.js的包管理器。也就是想要使用grunt，那么首先你要安装node.js，安装node.js并不复杂，windows下只需要打开官网下载安装即可，跟安装软件没有区别。

node.js官网地址：https://nodejs.org

安装完成后在命令行窗口输入：node -v 就可以查看是否安装成功，完成上面步骤后，接下来就要进入grunt的安装了。

安装grunt-cli

grunt的使用需要grunt-cli命令行的支持，所以需要将grunt-cli安装到全局环境中，在命令行窗口输入：

npm install -g grunt-cli

执行此命令后，grunt命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装 grunt-cli并不等于安装了grunt，grunt-cli 的任务很简单，就是调用与 gruntfile 在同一目录中的 grunt。这样带来的好处就是允许你在同一个系统上同时安装多个版本的grunt。

现在开始就可以使用grunt来管理项目了，怎么开始呢，这里说明两种情况。一种是已经在用的项目，根据这个项目的配置初始化，一种是创建一个全新的项目。

初始化已经在用的项目

打开命令行窗口并转到你的项目根目录下，执行下面三步。

1、将该项目里面的 package.json 和 Gruntfile.js 两个配置文件复制到一个你建的项目根目录里面；

2、执行 npm install；

3、执行 grunt；

新建项目

首先，创建一个grunt（可自己定义项目名称）的文件夹，并在此文件夹内创建 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，我们现在需要往里面加点内容，如下：

很明显，我在这里写上了当前项目的名称、定了个版本及写上了devdependencies依赖，现在这是全新项目，依赖项里面是没有数据的，其实这个依赖不写也没有问题，只定义好你自己想定义的配置就好了，甚至你什么都不需要写，就在此文件上写上一个 花括号  {} 就可以了，接下来的安装grunt 及其插件的时候，程序会自动将依赖项目加入到这个文件内。

既然这是一个grunt项目，那当然需要有grunt，前面只是安装了grunt-cli的命令环境，并没有安装grunt，grunt的安装是针对项目的，每个项目需要单独为其安装grunt，grunt的插件和grunt的安装是一样的，只不过插件需要基于grunt来执行，所以我们首先要安装的当然就是grunt了。

npm install grunt --save-dev

grunt安装完成后，可以看下package.json文件有什么变化。

看到没有，devDependencies里面多了一项grunt的配置，这就是安装完成后自动写上去的，接下来的其它插件跟这个是一样的。

现在我们来执行一下grunt命令，看有什么提示。

看到这里，证明我们的grunt安装成功了，但现在提示是没有默认的任务需要执行，这就对了，我本身也没有为其添加执行任务，当然是没有的，而那个Gruntfile.js 存在的目的就是写执行任务的。

打开Gruntfile.js， 添加下面代码：

再尝试执行grunt命令，会发现刚才的warining不见了：

到此，整个执行流程就没有问题了，接下来要做的，那就是要安装你想要的插件，并写到执行任务里面。

插件列表网址：http://www.gruntjs.net/plugins

插件的安装与使用大同小异，每个插件点进去都有安装及使用文档，我这里就简单安装几个作为说明。

grunt-contrib-jshint  （检查js语法的）

grunt-contrib-uglify （js压缩）

grunt-contrib-requirejs （模块化依赖合并）

上面的三个任务不难理解，任务添加流程都是一样的，先通过grunt安装插件，然后在Gruntfile.js里面根据文档添加任务配置，接着就使用grunt.loadNpmTasks()来加载插件，最后在注册任务里面按顺序执行。

其中从截图上可以看到有使用package.json里面的配置信息的情况，也就是说package.json里面的配置信息是可以在此加载并使用的。

任务添加完毕后可以在命令窗口执行 grunt 看下执行效果。