一、入口函数
javascript
module.exports = function(grunt){ //在这里配置你的grunt任务 }
二、packagjson导入
javascript
module.exports = function(grunt){ grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); }
三、任务配置
grunt的任何插件,配置接口形式都是一致的。都是在任务对象中包含有options配置对象和打包的配置。比如:
javascript
concat: { options: { }, dist: { } }
其中options
对象中是改任务插件提供的配置参数,具体设置需要参考对应插件文档。
多目标配置
如果要实现一个任务,多个目标的配置呢?
javascript
concat: { foo: { // 这里是concat任务'foo'目标的选项和文件 options:{}, dist:{} }, bar: { // 这里是concat任务'bar'目标的选择和文件 options:{}, dist:{} } }
指定一个像grunt concat:foo
或者grunt concat:bar
的任务和目标只会处理指定的任务目标配置,而运行grunt concat
将遍历所有的(定义在concat任务中的)目标并依次处理。注意,如果一个任务使用grunt.renameTask
重命名过,Grunt将在配置对象中查找新的任务名称属性。
注意,不是所有的grunt 任务模块都支持多目标任务配置,所以,请看对应模块的官方文档
options配置
同一任务的options
配置存在全局配置和局部配置。局部配置可以覆盖全局配置。
javascript
grunt.initConfig({ concat: { options: { // 这里是任务级的Options,覆盖任务的默认值 }, foo: { options: { // 这里是'foo'目标的options,它会覆盖任务级的options. } }, bar: { // 没有指定options,这个目标将使用任务级的options } } });
简洁文件配置
1.单独任务
a.单个任务(concat)单个目标(bar)单个src-dest映射
javascript
concat: { bar: { src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b.js' } }
b.单个任务单个目标,多个src-dest映射,需要用到特定的files
数组来包裹多个src-dest 对象
javascript
concat: { files: [{ src: ['src/aa.js', 'src/aaa.js'], dest: ['src/a.js'] }, { src: ['src/bb.js', 'src/bbb.js'], dest: ['src/b.js'] }] }
2.多个任务配置
a.多任务,单目标配置
javascript
concat: { bar: { src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b.js' } }, uglify: { bar: { src: ['dest/b.js'], dest: 'dest/b.min.js' } }
b.多任务,多个目标配置(略...)
动态文件对象构建
如果想针对某个文件夹下面的所有子目录及某种格式文件进行任务处理,那么,就不必如同以上那种指定文件名来进行构建了,这里就需要动态构建。
javascript
cssmin: { files: [{ expand: true, cwd: './dev/css/',//文件目标位置 src: ['**/*.css', '!*.min.css'], //文件匹配 dest: './build/css/', //打包到build的css目录中 ext: '.css' //扩展格式 }] }
四、任务安装和注册
模块安装
模块安装使用grunt.loadNpmTasks(taskName)
方法,比如安装grunt-contrib-concat
,就这么调用:
javascript
grunt.loadNpmTasks('grunt-contrib-concat')
任务注册
grunt默认使用default
作为任务名。例如:
javascript
grunt.registerTask('default', ['requirejs', 'concat', 'csscomb', 'imagemin']);
当我执行grunt
命令时,就会把'requirejs', 'concat', 'csscomb', 'imagemin'这些任务全部执行。
当然,你也可以把'default'改成其他名称,比如'mytask'。
任务执行
若是你应经使用npm
安装了任务需要的模块到本地(或者全局),那么直接执行grunt yourTaskName
命令即可。
否则,你需要先执行npm install
命令,这样会将package.json
中的模块安装到当前开发区,然后再执行grunt命令。
也可以初始建立一个空的package.json
文件,然后安装想要的模块,package.json
会自动更新你已经安装的模块的配置信息。
执行顺序依照grunt.registerTask
中的参数数组中指定的顺序。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。