使用一个gulp任务运行多个项目的最佳方法是什么?

时间:2015-03-30 17:01:58

标签: javascript gulp

我正在尝试使用一个gulp.js文件来管理我正在构建的多个主题。

// Optimize images
gulp.task('images', function () {

  // palo theme
  return gulp.src('palo/images/**/*')
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest('dist/palo/images'))
    .pipe($.size({title: 'images'}));

  // alto theme
  return gulp.src('alto/images/**/*')
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest('dist/alto/images'))
    .pipe($.size({title: 'images'}));

});

我不确定我是否可以构建每个主题的数组并循环它,我尝试了但没有成功。

var themes = ['palo','alto']

gulp.task('images', function () {

  for (i = 0; i < themes.length; i++) { 
    return gulp.src(themes[i]+'/images/**/*')
      .pipe($.cache($.imagemin({
        progressive: true,
        interlaced: true
      })))
      .pipe(gulp.dest('dist/'+themes[i]+'/images'))
      .pipe($.size({title: 'images'}));
 }

});

我宁愿循环每个主题,而不是为每个主题构建一个新的块。

1 个答案:

答案 0 :(得分:2)

使用流数组:

 var es = require('event-stream');

 ...


 gulp.task('images', function () {

    var themes = [
        {
            src: 'palo/images/**/*',
            dest: 'dist/palo/images'
        },
        {
            src: 'alto/images/**/*',
            dest: 'dist/alto/images'
        }
    ];

    var tasks = themes.map(function(theme) {
        return gulp.src(theme.src)
            .pipe($.cache($.imagemin({
                progressive: true,
                interlaced: true
            })))
            .pipe(gulp.dest(theme.dest))
            .pipe($.size({title: 'images'}));
    })

    return es.merge.apply(null, tasks)

});