grunt构建自动化开发环境

作为一个WEB开发者，一定会遇到这些问题：

1.分工合作最后怎么合并代码，包括css,javascript代码。

2.开发完成怎么压缩javascript代码。

3.开发过程中如何保证代码质量和错误提醒?代码飞检?代码走查?

团队开发中都会遇到这些问题，那么问题来了。有什么工具能帮助组织前端开发团队，便于web项目开发管理?

引用别人的话：

1. 你还不知道grunt？那你就out了——jquery和bootstrap等世界顶尖web前端web框架都在用，你没有理由不用。
2. 你还在手动合并css代码，手动压缩javascript代码，一帮人在会议室进行代码走查吗？——grunt可以帮你自动完成这些工作。

grunt基于nodejs，兼容各个操作系统（windows，linux，mac）
grunt——web前端开发的神器，快拿走吧！

 

下面介绍一下基于windows的grunt工具的使用方法：

1.首先安装nodejs,grunt和grunt插件是基于nodejs运行的，先下载安装下，地址：https://nodejs.org/en/

安装完成后可以查看一下nodejs版本： node -v

2.安装grunt-CLI,要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。（注意，mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令。）

回车后，命令行会出现一个转动的小横线，表示正在联网加载。不一会就安装完成了。

下面验证下grunt-cli是否安装成功，输入命令：grunt

出现如下所示效果就表示已经安装成功。

OK.安装成功了下面我们来实践一把，看看grunt到底是啥玩意、怎么玩的?

---------------------------------------------------------------------------------------------------------

1.在电脑的D盘下面建了一个“grunt_test”文件夹，里面建了三个空文件夹、两个空文档，名称如下图。（注意 Gruntfile.js 文件的首字母大写！）

Package.json的内容我们写成如下格式：

很明显，我们把这个网站或系统的名称、版本写了一下。最后一个devDependencies是开发依赖项，即我们现在这个系统，将会依赖于哪些工具来开发。现在代码一行都没有写，就先写一个空对象。后面会慢慢把它填充起来。

2.安装构建工具grunt.Grunt没有具体的作用，但是它能把有具体作用的一个一个插件组合起来，形成一个整体效应。例如，你需要检查js语法错误，然后再去压缩js代码。如果这两步你都去手动操作，会耗费很多成本。Grunt就能让你省去这些手动操作的成本。注意，这里安装grunt不再是全局安装了，需要你在控制台进入到网站或系统的具体目录下。这里我们进入 D:\grunt_test 目录下。然后输入以下命令:

npm install grunt --save-dev

注意：--save-dev的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。看到"开发依赖项"，是不是觉得有些眼熟？上文在配置package.json时，其中的devDependencies中就会存储开发依赖项。

安装成功后会显示下图：

现在打开package.json看看，那里的devDependencies变化：

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

下面试试grunt能否运行：进入到d:/grunt_test输入grunt命令，出现如下效果：

出现这个效果说明grunt已经成功安装了。但是还有warning 需要我们继续做一些配置修改。

3.配置Gruntfile.js文件

  我们先把Gruntfile.js配置成如下格式：

  

再次运行grunt命令会发现不报错了：

另外请注意Gruntfile.js中的一句话：pkg:grunt.file.readJSON('package.json')。这句话是在Gruntfile.js中获取package.json中的内容。在上文配置package.json时我们说过：package.json中的内容不光是用来占位置的，还可以在其他地方获取。这里不是已经获取了package.json内容了吗？

关于如何获取，会在下面的插件使用中进行介绍。

4.关于grunt插件。

grunt插件很多，需要插件可以到 http://www.gruntjs.net/plugins上去查看使用方法。

介绍几个常用的插件：

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

grunt集全世界web前端开发的智慧于一身，比你想想的更加强大，它的插件库能应对你在web前端开发遇到的任何事情。

这里我们介绍一个插件的使用方法，其他插件的安装方法都差不多，具体可以问下度娘~~~

 

-------uglify插件使用方法（压缩javascript代码）---------

Uglify插件的功能就是压缩javascript代码。压缩是前端开发性能优化的一个方法，压缩后减小了网络传输量和带宽占用，这样可以减小了服务器的处理的压力。

装uglify插件的方式，和安装grunt是一样的。输入如下命令：

npm install grunt-contrib-uglify --save-dev

安装完成之后，你会看到package.json中“devDependencies”节点的变化，以及“node_modules”文件夹里的变化。

我们要使用uglify来压缩javascript代码，当然得创建一个js文件来做实验。我们在现有的src文件夹中新建一个test.js，并随便写一些代码。

下面需要进行配置。要压缩谁？往哪里压缩？这些都需要配置，在Gruntfile.js中配置。

首先，在grunt.initConfig方法中配置 uglify 的配置参数。

注意：对uglify的配置有两项。

　　options中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。

　　build中配置了源文件和目标文件。

另外，在 grunt.initConfig 方法之后，要让grunt去加载这一个插件。如下所示：

最后，需要配置在grunt命令执行时，要不要立即执行uglify插件？如下所示：

注意：后面插件的顺序按照各自需求可以惊醒调整。

经过上述步骤，现在已经完成了所有配置。我们试一试效果：

在控制台中运行grunt命令，得到下面的效果：

最终在build文件夹下生成了压缩文件，打开看一下：

不难发现，运行grunt命令后根据package.json中的name和version生成了文件名。而且，压缩后的代码的banner也是符合Gruntfile.js中的配置要求的。

到这里uglify插件的安装配置过程就结束了。

到这里我发现，grunt集成开发环境真的很赞，适用于前台开发团队。

ps:要想实现搭建一个自动化web前端开发环境我们还需要安装watch插件，应该说是必不可少。它可以检测到了文件变化，然后自动运行你安装的各种插件，执行完毕之后重新进行监听。这样就实现了自动化。