管道内的 Gulp 条件答案

【问题标题】：Gulp condition inside pipe管道内的 Gulp 条件
【发布时间】：2015-01-26 16:52:55
【问题描述】：

如何在 Gulp 管道中执行条件以输出到不同的目的地。

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

【问题讨论】：

你想用什么类型的表达方式？

标签： node.js gulp gulp-sass

【解决方案1】：

没有任何新依赖的解决方案：

gulp.src 函数返回一个流，所以你可以使用它;)
看看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;
});

【讨论】：

不使用不适合我的 gulpif 的绝佳解决方案
@Tonio，如果此问题仍然存在，请尝试使用此代码的更新（由 Markus）版本。

【解决方案2】：

如果您不想添加任何额外的依赖项，您可以信任良好的旧 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 %>'));
});

或者对于多种情况：

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

【讨论】：

@Arashsoft gulp.util 代表 github.com/gulpjs/gulp-util。而gulp.util.noop 是一个完美的东西：它返回一个除了直接通过 gulp 管道传递数据之外什么都不做的流。

【解决方案3】：

使用gulp-if 插件：

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

【讨论】：

【解决方案4】：

我建议你使用这样的表达方式：

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

【讨论】：

我的条件案例来自 source.sass，我该怎么做呢？