如何将对象传递给gulp任务以能够同步运行该任务？

Question

I have two gulp tasks

gulp.task('build:dev', ['task1', task2', task3'], () => {
  doCssmin({'destination': ['file1', 'file2']});
});


gulp.task('build:prod', ['task1', task2', task3'], () => {
  doCssmin({'destination': ['file3', 'file4']});
});

Now I have cssMin task which is shared between build:dev and build:prod so I created that as a function to share with both of them.

function doCssmin(files) {
  _.each(files, function(val, key) {
    gulp.src(val)
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(rename(basename(key)))
    .pipe(gulp.dest(dirname(key)));
  });

}

and doCssmin accept files parameter as build:dev and build:prod they have different files to minify css. If I run build:dev or build:prod doCssmin will be run asynchronously. But doCssmin depends on task2 .

My question is how do I extract doCssmin to a gulp task and accept files parameter so it can be shared with build:dev and build:prod tasks?

Not sure if it's too confusing?

Answer 1

Yesterday, I answered a question on making your Gulp tasks more DRY . I believe a good chunk of that answer applies here as well.

To support loops with that, you want to merge the streams that you receive from gulp.src . Using the example here :

gulp.task('test', function() {
  var bootstrap = gulp.src('bootstrap/js/*.js')
    .pipe(gulp.dest('public/bootstrap'));

  var jquery = gulp.src('jquery.cookie/jquery.cookie.js')
    .pipe(gulp.dest('public/jquery'));

  return merge(bootstrap, jquery);
});

For an array, you can use Array.prototype.map to convert the items into streams, then merge all of those:

function minifyCss(paths) {
  return merge.apply(this, paths.map(function (path) {
    gulp.src(path)
      .pipe(minifyCss({compatibility: 'ie8'}))
      .pipe(rename(basename(path)))
      .pipe(gulp.dest(dirname(path)));
  }));
}

gulp.task('test', function () {
  return minifyCss(['foo', 'bar']);
});