使用grunt concat,我如何自动将同一文件连接到许多其他文件?

时间:2012-10-04 08:05:22

标签: concat gruntjs

要连接两个文件,它看起来像这样:

  concat: {
    src: ['common.js','js/app.js'],
    dest: 'assets/js/app.js'
  }

如果我想将整个文件夹连成一个,它看起来像这样:

  concat: {
    src: ['dev/*.js','],
    dest: 'prod/js/app.js'
  }

但是,假设我有一个文件,我想连接到10或20个其他文件,我希望它们分别连接?换句话说,这就是我在寻找的东西:

A.js + B.js = AB.js
A.js + C.js = AC.js
A.js + D.js = AD.js
A.js + E.js = AE.js

依此类推......更具体一点,我可以弄清楚如何按照描述逐个连接文件,但我想弄清楚如何从示例中指定A.js,并让它连接到指定路径中的任何文件。所以我想要的是:

A.js + dev/*.js = AB.js, AC.js, AD.js, AE.js ...

在伪代码中,这就是我想要的:

  concat: {
    src: ['common.js', 'dev/*.js','], // common.js gets concatenated to each file in this directory
    dest: 'prod/js/*.js' // each file in src gets saved separately in dest 
  }

我很感激任何帮助,我很难找到关于如何做到这一点的信息

1 个答案:

答案 0 :(得分:19)

Grunt的内置concat任务(我建议查看源btw)不支持dest: 'prod/js/*.js'之类的任何内容,你必须单独指定每个输出目标,这在你的情况下是一种过度杀伤力。

最好的办法是编写自己的代码(可能将其包装在自定义任务中),这很简单。这是一个简单的 wrap 多任务。不要保证它的稳健和安全:)

  grunt.registerMultiTask('wrap', 'Wraps source files with specified header and footer', function() {
        var data = this.data,
            path = require('path'),
            dest = grunt.template.process(data.dest),
            files = grunt.file.expandFiles(this.file.src),
            header = grunt.file.read(grunt.template.process(data.header)),
            footer = grunt.file.read(grunt.template.process(data.footer)),
            sep = grunt.utils.linefeed; 

        files.forEach(function(f) {
            var p = dest + '/' + path.basename(f),
                contents = grunt.file.read(f);

            grunt.file.write(p, header + sep + contents + sep + footer);
            grunt.log.writeln('File "' + p + '" created.');
        });
  });

使用如下配置提供:

wrap: {
    html: {
        header: '<%= project.partials %>/head.html',
        footer: '<%= project.partials %>/footer.html',
        src: [
            '<%= project.pages %>/index.html',
            '<%= project.pages %>/about.html',
            '<%= project.pages %>/blog.html'
        ],
        dest: '.'   // destination *directory*, probably better than specifying same file names twice
    }
}

以防万一我也更新了你的小提琴:http://jsfiddle.net/dipish/hKkGX/