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

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

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

以下为Gruntfile.js的配置:

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

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

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

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

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

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

系列文章

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

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

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