基于AngularJS构建的项目框架[三]

配置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