前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例。
1,包装函数
module.exports=function(grunt){}
我们的代码要包括在这个方法里。
2,任务配置
// 包装函数
module.exports = function(grunt) {
// 任务配置
grunt.initConfig({
})
}
在这里我们需要初始化参数,这是grunt的最主要的部分
3,导入包文件
// 包装函数
module.exports = function(grunt) {
// 任务配置
grunt.initConfig({
pkg:grunt.file.readJSON('package.json')
})
}
使用 grunt.file.readJSON('package.json') 可以把外部的package.json文件引入到 gruntfile.js,并生成一个JSON格式的对象可以访问 package.json里的数据,我们如果使用 grunt.file.readYAML() 生成 YAML格式的对象。
4,配置任务
// 任务配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: { // concat 任务的配置 },
uglify: { // uglify 任务的配置 },
my_property: 'whatever', my_src_files: ['foo/*.js', 'bar/*.js']// 其他与任务无关的属性
})
任务配置定义在 Gruntfile 和 grunt.intiConfig()方法中,配置主要是以任务命名的属性,也可以包含其他属性,但是不能与任务所需要的属性重合
5,任务和目标
当任务运行的时候(下面介绍的加载任务之后),Grunt会从同名的属性中查找配置(即从initConfig)。多重任务可以有多个配置,每个任务使用任意命名的目标定义。
grunt.initConfig({
concat: {
foo: {
// concat 任务的目标 "foo"
},
bar: {
// concat 任务的目标 "bar"
},
},
uglify: {
bar: {
// uglify 任务的目标 "bar"
},
},
});
运行 grunt concat:foo 或 grunt concat:bar 只会处理指定的目标配置,而运行 grunt concat都会运行
6,任务加载
一些任务,比如合并,压缩和校验等都可以作为 grunt插件。只要插件被指定 package.json中,并且通过 npm install 安装好,就可以在 gruntfile中加载: