从一个gulp任务创建多个输出文件

在过去只使用grunt之后，我正在学习吞咽式的做事方式。我很难理解如何通过多个输入来获得多个输出

比如说，我有一个大型项目，每个页面都有专门的js：

咕哝的方式：

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/everypage.min.js': ['src/jquery.js', 'src/navigation.js'],
        'dest/special-page.min.js': ['src/vendor/handlebars.js', 'src/something-else.js']
      }
    }
  }
});

---

这可能是一个糟糕的例子，因为它违反了“只做一件事”原则，因为

grunt-uglify

是串联和丑化的。无论如何，我有兴趣学习如何通过大口大口地完成同样的事情。

多亏了@AnilNatha，我开始以大口大口的心态思考

就我的情况而言，我有大量需要连接的文件。我将它们卸载到concat任务迭代的配置对象：

// Could be moved to another file and `required` in.
var files = { 
  'polyfills.js': ['js/vendor/picturefill.js', 'js/vendor/augment.js'],
  'map.js': [
    'js/vendor/leaflet.js',
    'js/vendor/leaflet.markercluster.min.js',
    'js/vendor/jquery.easyModal.js',
    'js/vendor/jquery-autocomplete.min.js',
    'js/vendor/underscore.1.8.3.js',
    'js/map.js'
  ],
  ...
};
var output = './build/js';

// Using underscore.js pass the key/value pair to custom concat function
gulp.task('concat', function (done) {
  _.each(files, concat);
  // bs.reload(); if you're using browsersync
  done(); // tell gulp this asynchronous process is complete

});

// Custom concat function
function concat(files, dest) {
  return gulp.src(files)
    .pipe($.concat(dest))
    .pipe(gulp.dest(output));
}

---

文档显示了这一点，但它没有提供文件的连接。基本上，您输入一个glob作为

src

，

uglify（）

它们，然后告诉gulp

dest

您希望存储uglified文件。完成后，运行一个单独的任务，读入src、要连接的文件列表以及要用于该文件的

dest

。下面是一个可以使用gulp解析文件的插件：我现在理解gulp将

concat

和

uglify

处理分开，这很有意义。我的问题是如何告诉gulp我想将

['file1.js'、'file2.js'、'file3.js']

组合成

dist/everypage.js

和

['file4.js'、'file5.js']

组合成

'dist/special.js'

？听起来需要创建两个单独的流，都包含uglify和concat调用，一个流生成everypage.js，另一个流生成special.js。如果需要返回组合流，可以尝试使用，下面是一个正在运行的合并流列表。是否有一种可管理的方法来维护源列表及其连接的目标（格式如json）并将其传递到任务中，而不是创建一个包含约20个流的单个任务，最后是100行？我不知道是谁一直对您投反对票，但很高兴看到你在进步。一个建议是，在创建不返回任何内容的gulp任务时要小心，因为如果以后将这些任务用作其他任务的依赖项，则可能会导致问题。这就是为什么我提到使用merge stream返回组合流，因为您需要多次调用concat函数。我使用了回调技术，我认为这涵盖了您的评论，再次感谢@AnilNathaFor对于那些仍在疑惑的人，gulpjs.org有一个很好的方法：