如何使用 Grunt 和/或 Gulp 观察和处理（以相同方式）多个文件到多个输出中？

Question

我目前正在使用 Grunt，在尝试 Gulp 时，我遇到了与 Grunt 相同的问题。

我正在尝试处理一些 js 文件（concat、uglify 和缩小它们），但我不希望所有这些文件都编译成一个大文件，我想要多个输出文件，每个文件都来自一些输入文件的处理：

scripts =
    firstOutput:
        outputFilename: 'first.min.js',
        inputFiles: ['one.js', 'two.js']

    secondOutput:
        outputFilename: 'second.min.js',
        inputFiles: ['three.js']

    thirdOutput:
        outputFilename: 'third.min.js',
        inputFiles: ['four.js', 'five.js']

我发现（目前）使用 Grunt 实现这一目标的唯一方法是使用多个手表和多个 uglify 任务（或一个 uglify 任务和一个监听器在手表更改时动态修改 uglify 任务 src 和 dest）：

module.exports = (grunt) ->
    grunt.loadNpmTasks 'grunt-contrib-watch'
    grunt.loadNpmTasks 'grunt-contrib-uglify'

    grunt.initConfig
         watch:
             firstOutput:
                 files: scripts.firstOutput.inputFiles
                 tasks: ['uglify:firstOutput']
                 options :
                     spawn : false

             secondOutput:
                 files: scripts.secondOutput.inputFiles
                 tasks: ['uglify:secondOutput']
                 options :
                     spawn : false

             thirdOutput:
                 files: scripts.thirdOutput.inputFiles
                 tasks: ['uglify:thirdOutput']
                 options :
                     spawn : false

         uglify:
             firstOutput:
                 files: scripts.firstOutput.inputFiles
                 dest: scripts.firstOutput.outputFilename

             secondOutput:
                 files: scripts.secondOutput.inputFiles
                 dest: scripts.secondOutput.outputFilename

             thirdOutput:
                 files: scripts.thirdOutput.inputFiles
                 dest: scripts.thirdOutput.outputFilename

    grunt.registerTask 'default', 'watch'

而且，您可以想象，这只是一个示例，在我的大型 Web 应用程序中，不仅仅是三个输出 js 文件，而且我还将少一些文件处理成一些 css 文件

我的 Gruntfile 真的很大，而且我发现它有很多重复的代码，有没有办法让这段代码重构为一个 watch 和一个 uglify 任务，自动猜测 src 和 dest 有某种依赖（要知道如果four.js文件被修改了，还要处理第三个输出）？

如果你想用 Gulp 来做这件事，我会很高兴地接受它，因为我想在我通常的工作流程中测试它。

Answer 1

以下是使用 gulp + vanilla javascript 执行此操作的方法：

var _ = require("underscore")
  , gulp = require("gulp")
  , uglify = require("gulp-uglify")

var scripts = [
  {
    output: 'first.min.js',
    input: ['one.js', 'two.js']
  }
  , {
    output: 'second.min.js',
    input: ['three.js']
  }
  , {
    output: 'third.min.js',
    input: ['four.js', 'five.js']
  }
];

function build(files, dest) {

  return gulp.src(files)
    .pipe(uglify())
    .pipe(gulp.dest(dest));

}

gulp.task("watch", function () {

  _.each(scripts, function (script, i) {

    gulp.watch(script.input, function () {

      build(script.input, script.output);

    });

  });

});

更好如果您可以使用 glob 来匹配文件集，这样您就不必为每个 input 集写出路径。类似input: ["one/**/*.js, "other/**/*.js"]

Answer 2

"我正在尝试处理一些 js 文件（concat、uglify 和 minify 它们），但我不希望它们全部编译成一个大文件”

我能问为什么吗？一个较大文件的好处是您可以节省 HTTP 请求，您加载的每个资源都会导致您的网站速度变慢。我可以建议对 RequireJS 使用适当的依赖管理吗？这样优化器就可以遍历你的依赖图并为你输出优化的文件。

http://requirejs.org/

这也有一个繁重的任务：

https://github.com/gruntjs/grunt-contrib-requirejs