grunt从入门到自定义项目模板

基于任务的命令行构建工具（针对javascript项目）

前端的工具算得上是五花八门，在介绍如何grunt之前，首先我们得反问自己：

grunt能够帮我们解决什么问题？

是否有其他更合适的替代方案？

作为一名开发人员，我们见过了不少功能胡里花哨但并不实用的工具。但是，我们很少会因为一个工具功能很强大而去使用它。更多地，是因为在工作中我们遇到了一些问题，而某个工具刚好帮我们解决了这些问题。

假设我们有个叫<code>imweb_proj</code>的项目，该项目主要包含两个功能模块，分别是<code>modulea</code>、<code>moduleb</code>。回想一下，作为一名前端开发人员，从功能开发到产品正式上线，我们的工作流程是什么样的：

正式进入编码工作前，得做些准备工作：

新建目录<code>imweb_proj</code>，index.html为主入口；根目录下面再另外新建三个目录js、css、img，分别用来存放js文件、css文件、图片

imweb_proj/js下新建个main.js作为项目主逻辑的入口，添加modulea.js、modueb.js，对了，不能把我们的基础组件badjs.js、simple.js、nohost.js给忘了

imweb_proj/css下新建个reset.css，添加modulea.css、moduleb.css

热火朝天地编码，产品终于即将上线，上线前的准备工作同样不能马虎

<code>jshint</code>——检查下js代码规范性，避免进行类似隐式全局变量这样的坑里

<code>concat</code>——js文件合并，合理减少请求数，提升加载速度

<code>cssmin</code>——css文件合并，合理减少请求数，提升加载速度

<code>uglyfy</code>——压缩文件，减少文件尺寸，提升用户侧加载速度

<code>qunit</code>——单元测试，提高项目可维护性，结合递归测试可尽早发现潜在问题

…

上面的场景是不是很眼熟？重复而枯燥的工作占据了我们太多的时间，忘了谁说过，当重复做一件事超过三次，就应该考虑将它自动化。

grunt正是为了解决上述问题而诞生，它将上面提到的项目结构生成、jshint检查、文件合并、压缩、单元测试等繁琐的工作变成一个个可自动化完成的任务，一键搞定。

文档丰富：详细的使用说明，从入门使用，到高级定制，非常详尽

插件丰富：基本能够想到的常用的任务，都可以找到

社区活跃：grunt的开发团队还是挺勤劳的，社区活跃度也挺高

当然有，而且不少，ant、yeoman、mod、fiddler+willow+qzmin等，先不展开

grunt使用场景通常分两种：

维护现有的grunt项目——已经配置好的项目，下面以jquery plugin项目为例进行讲解，简单了解下一个grunt项目的基本结构；

新创建的grunt项目——包括项目目录结构的创建，到grunt任务的配置等；这里可以采用现有的grunt模板，也可以采用自定义的模板；下文会采用自定义模板的形式，逐步讲解如何创建一个**imweb团队的前端基础项目结构**

注意：为了解决多版本并存的问题，从<code>0.4.x</code>版本开始，每个项目需独立安装grunt及对应插件，版本分别如下：

grunt <code>0.4.x</code>

nodejs <code>&gt;=0.8.0</code>

grunt从版本0.3.x到0.4.x，变化比较大，主要是为了解决grunt多版本共存的问题，有兴趣的童鞋可以了解下。如果之前安装了0.3.x版本，需先进行卸载

grunt-cli的主要作用是让我们可以运行grunt命令，加上-g，则可以在任意目录下运行，不展开

grunt-init是个脚手架工具，它可以帮你完成项目的自动化创建，包括项目的目录结构，每个目录里的文件等。具体情况要看你运行grunt-init指定的模板，以及创建过程中你对问题的回答，下文会简单讲到这个功能。

先运行下面命令安装grunt-init，

下面我们先通过安装jquery plugin模板，来展示gurnt模板的安装，项目的创建，以及一个grunt项目的目录结构

下面命令可以查看官方维护的grunt模板

运行下面命令安装jquery模板

在上一步中我们已经安装好了jquery模板，接着运行下面命令，安装jquery项目

按照引导回答下面问题，完成项目的创建

项目目录结构如下：

从上面的目录结构，大致可以看出各个目录、文件的作用，其中我们需要注意的是两个文件gruntfile.js、package.json，这两个文件都需要放在项目跟目录下。下面会稍微详细介绍到：

gruntfile.js 项目的grunt配置信息，包括模块依赖、任务定义

package.json 项目node模块的依赖信息，主要根据gruntfile生成

其他其他文件非grunt项目必须的，可以暂时不去看它

首先运行下面命令，安装所需node模块，耐心等候安装完即可

输入下面命令，运行grunt任务

输出如下，done

方式一：运行下面命令，通过逐步回答问题的方式创建基础的package.json文件2```

方式二：创建空的package.json文件，拷贝下面内容，根据需要进行修改

创建完package.json，运行如下命令，安装所需插件

运行如下命令，安装<code>最新版</code>的grunt

其实这种方式还是有点麻烦，grunt团队还是比较人性化的，针对gruntfile，还提供了一个单独的plugin，让我们免去重复劳动之苦，后面再讲

打开下载下来的示例目录，可以看到如下内容：

简单介绍下里面内容：

<code>template.js</code> 主模板文件，非常重要！里面主要内容有：项目创建时需要回答的问题，项目依赖的grunt模块（根据这个生成package.json）

<code>rename.json</code> 针对当前模板的目录/文 件重命名规则，不赘述

<code>root/</code> 重要！在这个目录里的文件，通过该模板生成项目结构时，会将root目录下的文件都拷贝到项目中去

下面是template.js最常包含的一些内容，主要包括：

<code>exports.description</code> 模板简单介绍信息

<code>exports.notes</code> 开始回答项目相关问题前，控制台打印的相关信息

<code>exports.after</code> 开始回答项目相关问题前，控制台打印的相关信息

<code>init.process</code> 项目创建的时候，需要回答的问题

<code>init.writepackagejson</code> 生成package.json，供grunt、npm使用

reame.json的作用比较简单，定义了从root目录将文件拷贝到实际项目下时的路径映射关系，以<code>sourcepath: destpath</code>的形式声明。sourcepath是相对于root的路径，而destpath则是相对于实际项目的路径。

ps：当destpath为false时，sourcepath对应的文件不会被拷贝到项目中去

进入root目录，可以看到很多文件，其中我们需要关注的有gruntfile.js、readme.md

gruntfile.js 项目的任务配置信息，把基础任务，如jshint、concat、uglify等配置好即可，其他的各个任务可自行扩充

readme.md 项目的readme信息，一个调理清晰的readme很重要

对gruntfile.js文件进行修改，如下，熟悉qzmin配置文件的童鞋应该很容易看懂

花了一点时间把imweb_proj配置好，现在终于到了实际运作阶段了。假设我们当前在目录imweb_proj下，imweb_template为imweb_proj目录当前仅有的内容

操作步骤可参照**jquery plugin示例：如何通过现有模板创建项目、运行grunt任务**，下面直接上命令

下面为运行grunt命令后控制台输出的信息

可以看到helloproj目录下的内容发生了改变，enjoy yourself！

上面对grunt进行了入门介绍，下面简单说下ant、aven

mod：元彦童鞋开发维护，功能很强大，grunt能完成的，mod都能完成，而且使用更加贴近我们的项目实践，入门更简单（有部分原因是因为

mod集成了很多常用户任务，而grunt早期也是这么做的，不过因为多版本的问题放弃了这种做法），之前听过元彦的分享，挺不错的，打算在项目中试用

由于时间问题，这里没有对grunt、ant、mod进行详细的对比，来个todo吧~~