grunt构建化之路——基础篇

初衷

接触grunt已经有段时间了，并且成功运用到了实际项目上了。这篇文章以及后面一些列的文章都是记录自己学习grunt这个构建工具以及使用的一个过程。为了自己以后技能点的巩固和避免采坑，所以就成就了这边文章。

grunt是什么

grunt是什么呢？概括来说：grunt是一个依赖于node平台的构建工具。那什么是构建工具呢？这个概念对于java开发者来说，一定不那么陌生，对于他们来说，java构建工具也是他们经常使用的辅助工具，像早期的ant到现在大红大紫的maven，都是java开发者常用的构建工具，他们被用来解决java文件的依赖，压缩、打包等任务。

grunt也是ant、maven性质类似的工具，不过它主要服务于前端的，主要被用来处理文件（包括html、css、js）的合并、压缩、依赖等问题，不过这并不是它本身的功能，grunt本身是一个构建平台，他的强大来自于其社区插件不断的增加和更新，grunt构建平台提供了成千上万插件来实现我们不同的构建需求，且由于开源，不断的开发人员贡献他们的一份力量。

gurnt的logo是一个牛头，看起来是不是很猛很萌的。

为什么选择grunt?是否还有其他的代替方案？

在讲这个标题之前，先讲一下前端构建工具的苦逼历史吧，首先在刀耕火种的时代，那时的页面相对简单，基本上都是table嵌套结构，js也是一些简单的交互，css还没发展成熟，项目占的时间比也集中在后台，后来随着web的发展，前端页面变得也相对复杂了，这时候前端主要通过手动或者使用java的ant工具来达到目的，但是一方面手动还是比较繁琐，而使用ant局限性也很大，比如不能处理脚本之间的依赖关系等，所以这段时间前端还是想当苦逼的。grunt的发展，得益于node的快速发展，gurnt的出现也是最近几年才发生的。除了grunt之外，现在还有一个冉冉的新星gulp也在发展壮大，除了这两个很典型的，npm本身也可以用来处理构建，不过这也算是后话了。（ps:构建工具不只本文提到的），真是构建一小步，前端一大步。

也许你会问，有了这么多构建工具，在技术选型的时候，那该选择哪个呢？至少从目前来看，还是选择grunt比较好，主要因素在一下方面：

• 社区活跃度高，插件最丰富（选择权重最高）
• 语法简单，易于编写
• 中文文档丰富，在后面帮助标题，提供了两个中文翻译连接。（英语渣的福音）
• 线下交流频繁（16613475，你懂得）

grunt环境的配置

grunt环境的搭建可以参考http://www.gruntjs.org/docs/getting-started.html
其步骤流程如下：

• 安装node，具体安装方法可以参考我前面写的文章。
• 安装gurnt-cli。具体可参考上面的链接。
• 在项目的根目录下，新建package.json和Gruntfile.js。
• 在项目的根目录下，运行npm install grunt --save-dev
  如果安装上面的连接一步步来的话，应该不会出什么差错了。通过这基本，grunt基本上就配置完毕了。（ps:注意加粗的部分）

使用grunt向控制台输出Hello World

加入上面的环境配置好了，那怎么知道grunt是否能跑起来呢，很简单，我们跑一个构建任务，其作用是像控制台输出“Hello World”，其流程如下，首先在Gruntfile.js添加以下的代码：

module.exports = function (grunt) {
grunt.registerTask('default', function() {
    grunt.log.write('Hello World!');
 });
};

然后切换到项目的根目录下，运行gurnt default 或者 grunt 命令，如果命令控制台能输出Hello World!,那就说明配置没什么问题了。

文章总结

之所以推荐grunt，是因为好的工具，能提高工作效率，怎么我们就能省下大把时间泡妹子了，呵呵！后起之秀gulp大有赶超grunt之势，不过现阶段不是我们考虑的。有时间也可以学习的。

后面会陆续发表一些grunt插件的文章，这些才是重中之重。希望大家能持续关注。

相关链接

官网地址 ：http://gruntjs.com/
中文站点1：http://www.gruntjs.org/
中文站点2：http://www.gruntjs.net/

拓展阅读

30分钟学会使用grunt打包前端代码
grunt快速学习小记
Grunt教程——初涉Grunt
使用Grunt构建任务管理脚本
grunt让Nodejs规范起来
grunt从入门到自定义项目模板
Grunt：任务自动管理工具