可能有人会好(tu)奇(cao):一个构建工具值得分为四部分来写吗?,你看那个谁谁谁一片文章就搞定了,在我看来:值得。我相信很多人都有这样的体验:自己学习一个新东西,在网络上找教程,搜索结果倒是有很多,但是没有哪篇教程能让你零基础掌握,自己总会在一些细节上出问题,既浪费时间,又影响人的学习热情。所以,本系列教程就是教你从零开始,学会理解、使用Grunt

终于到了真刀真枪的时刻了!

本篇文章将在上篇文章的项目中具体使用grunt-contrib-cssmin、grunt-contrib-uglify、grunt-contrib-imagemin、grunt-contrib-watch、load-grunt-tasks、connect-livereload,来实现在开发一个项目时**自动压缩CSS、JavaScript、图片以及页面实时刷新(修改文件后只需保存文件,不需手动刷新页面,就可实时呈现修改后的效果)**。还有更多的功能使用方式是类似的,我就不叙述了。

以下为Gruntfile.js的配置:

![][4]

![][5]

为了帮助大家连贯的理解,我把cssmin部分重复截图了。registerTask部分的第一个参数的名字是可以随便取的,不过同样还是建议遵循语义化。

大家应该注意到了,**loadNpmTasks**的代码变成了require(load-grunt-tasks)(grunt);这是因为我安装了一个load-grunt-tasks的插件,这样我就不用把加载的插件一个一个写出来了,只需上面一行代码就可以自动加载所有插件。

我个人非常喜欢grunt-contrib-watch插件,因为不用手动刷新,实在是帮了大忙。具体的配置有两种方式,

1. 安装chrome插件:这种方式需要安装的grunt插件有:grunt-contrib-watch、connect-livereload,此外还需要安装[Chrome LiveReload][6],以及配置WEB服务器,我个人更喜欢这种方式。因为公司开发项目时都会配置WEB服务器,这样的话使用这种方式就很简单了。
1. 使用grunt-contrib-connect插件来在本地运行WEB Server.这种方式我在本系列的第二篇[Grunt打造前端自动化工作流(二):常用插件的功能及参数介绍][7]中有过详细介绍,这里就不再重复了。

OK! 本系列教程终于告一段落了,之所以花这么多时间来做这件事,一是因为这个过程是我自己知识的总结。二是因为自己在学习一些东西的时候,经常会因为没有好的教程而走弯路,所以想做点事情来弥补这方面的空白。(说的好高尚~~~)。

参考文章:[Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑][8]

## 系列文章

[Grunt打造前端自动化工作流(一):Grunt安装][9]

[Grunt打造前端自动化工作流(二):常用插件的功能及参数介绍][10]

[Grunt打造前端自动化工作流(三):具体项目中浅尝Grunt][11]

[0]: http://div.io/dlogin
[1]: http://div.io/reg
[2]: http://div.io/node/tools
[3]: http://div.io/user/sunyuhui
[4]: http://divio.qiniudn.com/FjTEYqtypRe3vTTEb-JG5s1Oi1ma
[5]: http://divio.qiniudn.com/FtjElRa4CAnBsO07Cfcv05Q1RNgD
[6]: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
[7]: http://div.io/topic/971#connect
[8]: http://www.bluesdream.com/blog/grunt-plugin-livereload-wysiwyg-editor.html
[9]: http://www.reqianduan.com/2415.html
[10]: http://www.reqianduan.com/2417.html
[11]: http://www.reqianduan.com/2419.html