从gulp任务

Question

我正在学习过去使用grunt之后做的事情。我很难理解如何传递多个输入以获得多个输出w / gulp。

假设我有一个大型项目，每页都有专门的js：

Grunt Way：

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是连接和丑化的。无论如何，我有兴趣学习如何用gulp完成同样的事情。

Answer 1

感谢@AnilNatha我开始考虑更多的Gulp心态。

对于我的情况，我有一堆需要连接的文件。我将这些卸载到我的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));
}