配置Copy Task
项目根目录下的Gruntfile.js,我们并没有直接在此文件中对各个Task进行配置,而是在单独的文件中进行配置。如果项目比较大或者希望复用Task,这样做比较好。当然如果项目比较简单,则可以直接在Gruntfile.js中直接配置了。
在Gruntfile.js中LoadTask
grunt.loadTasks(‘grunt-config/tasks’);
具体的Task配置都在grunt-config/tasks目录中。
配置grunt-config/tasks/copy.js
module.exports = function(grunt) { var path = require('path'); grunt.loadNpmTasks('grunt-contrib-copy'); var buildDir = require('../buildDir.js')(); var dest = path.join(buildDir); var localeInterfix = path.join('src','modules','core') + path.sep; var files = grunt.file.expandMapping([ path.join('assets','img','*'), path.join('fonts','*'), path.join('src','modules','core','locale','*') ], dest, { rename: function(base, destPath) { var res = path.join(base, destPath); res = res.replace(localeInterfix,''); console.log("copy : " + res + " copied"); return res; } }); grunt.config('copy', { dev: { files: files }, production: { files: files } }); };
Wrapper Function
所有Grunt Task的配置都写在这个包装函数里:
module.exports = function(grunt) { // Do grunt-related things in here };
加载grunt-contrib-copy插件
grunt.loadNpmTasks(‘grunt-contrib-copy’);
配置Copy任务的参数
可以直接使用Json形式的配置项
uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } }
但也可以直接用JS代码
files: files
而前面的这一段代码:
var dest = path.join(buildDir); var localeInterfix = path.join('src','modules','core') + path.sep; var files = grunt.file.expandMapping([ path.join('assets','img','*'), path.join('fonts','*'), path.join('src','modules','core','locale','*') ], dest, { rename: function(base, destPath) { var res = path.join(base, destPath); res = res.replace(localeInterfix,''); console.log("copy : " + res + " copied"); return res; } });
就是为了生成配置项。
Task可以有多个Target
Copy这个task我们配置了两个target:dev和production,分别用于开发环境和生产环境。当然了,这个copy task在dev和production环境中都是一样的,而jade/less/requirejs 这些在dev和production中的配置就不一样了。
配置Less/Jade Task
结构上和copy.js差不多.大家自己去看看他们的Github主页,上面有具体配置项的说明.
https://github.com/gruntjs/grunt-contrib-copy
https://github.com/gruntjs/grunt-contrib-less
https://github.com/gruntjs/grunt-contrib-jade
Leave a Reply