【问题标题】:Using grunt concat, how would I automate the concatenation of the same file to many other files?使用 grunt concat,我将如何自动将同一文件连接到许多其他文件?
【发布时间】:2012-10-04 08:05:21
【问题描述】:

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

  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 
  }

感谢您的帮助,我很难找到有关如何执行此操作的信息

【问题讨论】:

  • 如果有人需要类似的东西,这个插件就是这样做的npmjs.org/package/grunt-wrap2000
  • 您需要做的就是使用 grunt-contrib-concat 中的横幅和页脚选项。如果您想添加整个文件,只需执行banner: require('./foo.js')。与页脚相同。

标签: concat gruntjs


【解决方案1】:

Grunt 的内置 concat 任务(我建议查看源代码)不支持 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/

【讨论】:

  • 澄清一下,我希望每个文件单独连接,所以你也可以做 dest: 'prod/js/*.js' 吗?并感谢您的回答!
  • 它看起来应该,但我无法让它工作。我知道这有很多问题要问,你有没有机会把它放在一个示例 grunt 文件中?这是我的 grunt 文件的 jsfiddle - 只是为了更容易阅读jsfiddle.net/rRpeg
  • 好吧,看起来问题是 concat 助手只能接受文件路径作为参数,而不是已经从文件中读取的字符串。我想我不应该依赖它
  • 感谢您为此所做的工作,但是为了澄清,我放在 jsfiddle 上的 grunt 文件是我现在正在做的一个例子,但这个问题的原因是实际项目将有数百个文件,因此指定输出目标是不切实际的。再次感谢您给予如此多的关注!我真的很感激
  • 不客气。我最近开始玩 grunt,所以我很好奇其他人正在尝试用它做什么 :) 但是我建议的解决方案不需要您指定输出目标,只需要指定它们都会去的目录。您可以使用通配符指定源路径,例如articles/*.html 会起作用。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多