Gulp condition inside pipe

Question

How can I do a condition inside Gulp pipe to output to a different destination.

g.task('sass', function() {
  return g.src(sources.sass).pipe(changed(output.css)).pipe(sass({
    style: 'compressed',
    sourcemap: true
  })).pipe(function() {
    if (..) {
      g.dest(output.css);
    } else {
      g.dest(output.css2);
    }
  }).pipe(notify('scss converted to css and
compressed
<%=f ile.relative %>'));
});

what type of expressions you'd like to use? – uladzimir Nov 28 '14 at 12:32 — uladzimir, Nov 28 '14 at 12:32

score 55 · Accepted Answer · answered Nov 29 '14 at 20:05

Use the gulp-if plugin:

var gulpif = require('gulp-if');

g.task('sass', function() {
    return g.src(sources.sass)
        .pipe(changed(output.css))
        .pipe(sass({style:'compressed', sourcemap:true}))

        // Conditional output
        .pipe(gulpif(condition1, g.dest(output.css)))
        .pipe(gulpif(condition2, g.dest(output.css2)))

        .pipe(notify('scss converted to css and compressed <%= file.relative %>'));
});

score 38 · Answer 2 · edited Mar 01 '18 at 17:18

38

The solution without any new dependencies:

The gulp.src function returns a stream, so you can use it ;)
Look at the gulp docs.

gulp.task('task', function () {
  let stream = gulp.src(sources.sass)
    .pipe(changed(output.css)).pipe(sass({
      style: 'compressed',
      sourcemap: true
    }));

  if (2 + 2 === 4) {
    stream = stream
      .pipe(someModule())
      .pipe(someModule2());
  }

  else {
    stream = stream
      .pipe(someModule3())
      .pipe(someModule4());
  }

  stream = stream.pipe(notify('scss converted to css and compressed'));

  return stream;
});

edited Mar 01 '18 at 17:18

Markus

143
1
6

answered Apr 10 '17 at 18:21

Niklavr

540
4
4

Great solution without using gulpif that was not working for me – Tonio Feb 01 '18 at 15:03
@Tonio, just try to using an updated (by Markus) version of this code if this problem still relevant. – Niklavr Mar 02 '18 at 14:43

score 5 · Answer 3 · answered Nov 28 '14 at 12:37

I suggest you to use expression something like this:

g.task('sass', function(){
  var destinationFileName;

  if (...) {
    destinationFileName = 'output.css';
  } else {
    destinationFileName = 'output2.css';
  }

  return g.src(sources.sass)
    .pipe(changed(output.css))
    .pipe(sass({style:'compressed', sourcemap:true}))
    .pipe(g.dest(destinationFileName))
    .pipe(notify('scss converted to css and compressed <%= file.relative %>'));
});

My condition case would be from source.sass, so how can I do that? — max li, Nov 28 '14 at 15:55

score 4 · Answer 4 · answered Jul 12 '17 at 15:19

If you do not want to add any extra dependency, you can trust good old Elvis (?:):

g.task('sass', function() {
  return g.src(sources.sass)
    .pipe(changed(output.css))
    .pipe(sass({style:'compressed', sourcemap:true}))

    // Conditional output
    .pipe(condition ? g.dest(output.css) : g.dest(output.css2))

    .pipe(notify('scss converted to css and compressed <%= file.relative %>'));
});

Or for multiple cases:

.pipe(condition1 ? g.dest(output.css) : gulp.util.noop())
.pipe(condition2 ? g.dest(output2.css) : gulp.util.noop())

@Arashsoft `gulp.util` stands for https://github.com/gulpjs/gulp-util. And `gulp.util.noop` is a perfect thing: it returns a stream that does nothing but passes data straight through gulp pipe. — mykola.rykov, Mar 28 '19 at 13:51

Gulp condition inside pipe

4 Answers4

Linked