这篇文章运用简单易懂的例子给大家介绍javascript中gruntfile的使用方法，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
我们提供的服务有：成都网站制作、成都做网站、微信公众号开发、网站优化、网站认证、莒县ssl等。为千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的莒县网站制作公司
一、grunt模块简介
grunt插件，是一种npm环境下的自动化工具。对于需要反复重复的任务，例如压缩、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。grunt模块根据Gruntfile.js文件中的配置进行任务。
如果在package.json中定义如下命令：
"scripts": {
"build": "npm install && grunt"
}因为运行npm run build会先安装devDependencies中定义的一些模块，则运行npm run build这个命令相当于做如下操作：
● npm install grunt-cli -g
● npm install
● grunt
二、gruntfile.js的结构：
● "wrapper" 函数
● 项目和任务配置
● 加载 grunt 插件和任务
● 自定义任务
三、"wrapper" 函数
每一份 Gruntfile.js（和grunt插件）都遵循同样的格式，你所书写的Grunt代码必须放在此函数内：
module.exports = function(grunt){
//do grunt-related things in here
}四、项目和任务配置
大部分的Grunt任务都依赖某些配置数据，我们通过grunt.initConfig 方法来配置Grunt任务的参数。
grunt.initConfig 方法的参数是一个JSON对象，你可以在这个配置对象中存储任意的数据。此外，由于这本身就是JavaScript，你还可以在这里使用任意的有效的JS代码。甚至你可以用<% %>模板字符串来引用已经配置过的属性，例如：
// 项目和任务配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), //获取 package.json 中的元数据(js代码)
proj:{
name:'hello',
description:'a hello demo'
},
hello: {
options: {
name: '<%= proj.name %>' //用<% %>模板字符串匹配hello
},
srcs: ['1.txt', '2.txt']
}
});在grunt.initConfig 方法中配置的属性，在任务模块中，可用grunt.config方法进行访问，例如：
grunt.config("proj.name");另外，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安装之后，就可以直接加载该任务。
// 加载能够提供"copy"任务的插件。
grunt.loadNpmTasks('grunt-contrib-copy');3.直接加载所有以"grunt-"打头的插件
npm上有个load-grunt-tasks插件可以用来加载dependency列表中所有以"grunt-"打头的插件。
将需要使用的"grunt-"打头的插件列在dependency中，然后在Gruntfile.js中进行调用。
//Load grunt tasks from NPM packages load-grunt-tasks
六、自定义任务
1.直接定义任务的行为
grunt.registerTask('hello', 'Show some msg', function() {
console.log(this.options().name); //输出hello
});2.定义为任务列表
可以将一个任务定义为一系列任务的组合，这一系列任务将按照顺序执行。
grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);3.定义默认任务
通过定义 default 任务，可以让Grunt默认执行一个或多个任务。执行 grunt 命令时如果不指定一个任务的话，将会执行默认任务。如进行下面定义的话执行grunt 相当于执行grunt hello。
grunt.registerTask('default', ['hello']);4.定义复合任务
registerMultiTask方法可以定义一个复合任务，复合任务将会对grunt.initConfig 方法中配置的相应属性中除了options外定义的属性依次作为target:data对进行处理。
module.exports = function(grunt) {
grunt.initConfig({
Log: {
options: {
sep: ';'
},
srcs: ['1.txt', '2.txt'],
dests: ['d1.txt', 'd2.txt']
}
});
grunt.registerMultiTask("Log", function() {
var options = this.options({ sep: '&' });
console.log(this.target);
console.log(this.data.join(options.sep));
});
};执行grunt Log将会输出：
Running "Log:srcs" (Log) task
srcs
1.txt;2.txt
Running "Log:dests" (Log) task
dests
d1.txt;d2.txt
定义任务行为Tips
1.任务内部可以执行其他的任务。
grunt.registerTask('mytask', function() {
grunt.task.run('task1', 'task2');
// Or:
grunt.task.run(['task1', 'task2']);
});2.定义异步任务
grunt.registerTask('mytask', function() {
var done = this.async();
//do something
done();
});3.当任务失败时，所有后续任务都将终止
在任务中，当执行失败，可以return false来表明当前任务执行失败，一般，多个任务按顺序执行，如果有任务失败时，所有后续任务都将终止。可以通过在命令行后加上--force来使有任务失败时，后续任务能继续进行。
4.任务中检查前置任务状态
有些任务可以依赖于其他任务的成功执行。通过grunt.task.requires方法来检查其前置任务是否已经执行，并且没有失败。
5.任务中检查配置属性
可以用方法grunt.task.requiresConfig指定一个或者多个字符串或者数组的配置属性为必需的。如果一个或多个必需的配置属性缺失，就通知系统当前任务失败。
关于javascript中gruntfile的使用方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
