本文摘自PHP中文网，作者angryTom，侵删。
一、grunt模块简介
grunt插件，是一种npm环境下的自动化工具。对于需要反复重复的任务，例如压缩、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。grunt模块根据Gruntfile.js文件中的配置进行任务。
如果在package.json中定义如下命令：
【相关课程推荐：JavaScript视频教程】
1 2 3 |
|
因为运行npm run build会先安装devDependencies中定义的一些模块，则运行npm run build这个命令相当于做如下操作：
● npm install grunt-cli -g
● npm install
● grunt
二、gruntfile.js的结构：
● "wrapper" 函数
● 项目和任务配置
● 加载 grunt 插件和任务
● 自定义任务
三、"wrapper" 函数
每一份 Gruntfile.js（和grunt插件）都遵循同样的格式，你所书写的Grunt代码必须放在此函数内：
1 2 3 |
|
四、项目和任务配置
大部分的Grunt任务都依赖某些配置数据，我们通过grunt.initConfig 方法来配置Grunt任务的参数。
grunt.initConfig 方法的参数是一个JSON对象，你可以在这个配置对象中存储任意的数据。此外，由于这本身就是JavaScript，你还可以在这里使用任意的有效的JS代码。甚至你可以用<% %>模板字符串来引用已经配置过的属性，例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
在grunt.initConfig 方法中配置的属性，在任务模块中，可用grunt.config方法进行访问，例如：
1 |
|
另外，grunt任务模块会自动根据任务名来提取配置对象中和任务名对应的属性，比如定义任务hello，则在配置对象对应的属性"hello"中配置任务执行函数中所需用到的配置和数据。
五、加载grunt插件任务
为了减少重复劳动，我们可以加载已有的插件任务。
1.加载自己私有的grunt插件
可将自己定义的一些task脚本放在同一个目录下，通过grunt.loadTasks方法从指定目录加载该目录下所有的grunt任务脚本。
2.加载在npm中发布的grunt插件
像 grunt-contrib-copy和grunt-contrib-uglify这些常用的任务都已经以grunt插件的形式被开发出来了，且被发布在npm公开库中，只要在 package.json 文件中将需要使用的插件列在dependency中，并通过npm install安装之后，就可以直接加载该任务。
1 2 |
|
3.直接加载所有以"grunt-"打头的插件
npm上有个load-grunt-tasks插件可以用来加载dependency列表中所有以"grunt-"打头的插件。
将需要使用的"grunt-"打头的插件列在dependency中，然后在Gruntfile.js中进行调用。
1 2 |
|
六、自定义任务
1.直接定义任务的行为
1 2 3 |
|
2.定义为任务列表
可以将一个任务定义为一系列任务的组合，这一系列任务将按照顺序执行。
相关阅读 >>
更多相关阅读请进入《模块化》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
