CODEWITHSUNDEEP
javascriptgulp
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13422

Best way to run multiple projects with one gulp task?

I am trying to use one gulp.js file to manage multiple themes I am building.

// 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'}));

});

I am not sure if I can build an array of each theme and loop it, I tried it and with no success. 

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'}));
 }

});

I would rather loop each theme instead of building a new block to return for each theme.

Upvotes: 0

Views: 1567

Answers (1)

ddprrt
ddprrt

Reputation: 7574

Use a stream array:

 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)

});

Upvotes: 2

Related Questions