javascript - Gulp 在保存到不同输出之前运行不同的任务

Question

我正在尝试将扁平 JavaScript 文件的结果映射到两个不同的位置，但我想首先对它们进行一些额外的处理。我遇到的问题是这些额外的位对于每个人来说都是完全不同的。

这是我尝试过的。我想在将输出保存到 app/scripts 时包含源映射，但我不想包含源映射，但在将其保存到 dist/scripts 时对其进行丑化.

gulp.task('scripts', () => {
  return gulp.src('app/scripts.babel/**/*.js')
    .pipe($.babel({
      presets: ['es2015']
    }))
    .pipe($.flatten())
    .pipe($.if('*.js', $.sourcemaps.init()))
    .pipe($.if('*.js', $.sourcemaps.write('.')))
    .pipe(gulp.dest('app/scripts'))
    .pipe($.uglify())
    .pipe(gulp.dest('dist/scripts'));
})

这个代码片段没有达到我想要的效果，因为创建源映射的结果被传递到流程的其余部分(除此之外，它实际上崩溃了管道中未处理的流错误 )。我想仅使用相同的任务来完成此操作。我该怎么做？

Answer 1

您使用gulp-sourcemaps的方式都是错的。应记录在源映射中的转换必须发生在 sourcemaps.init() 和 sourcemaps.write() 之间。另外gulp-flatten确实not support sourcemaps 。幸运的是，您可以使用 gulp-rename 实现相同的目的.

您收到该错误的原因是您尝试 uglify() 您的源映射文件。因为这些显然不包含有效的 JS uglify 解析器会抛出异常。

解决所有这些问题的方法是将流存储在一个变量中，然后将其 .pipe() 存储到两个不同的目的地。然而由于底层vinyl files在两个结果流之间共享，您需要首先使用 gulp-clone 克隆它们。否则，相同的文件将最终出现在两个目的地中。

最后你使用merge-stream合并两个结果流，以便您可以从任务中返回它们。

var merge = require('merge-stream');

gulp.task('scripts', () => {
  var js = gulp.src('app/scripts.babel/**/*.js')
    .pipe($.sourcemaps.init())
    .pipe($.babel({ presets: ['es2015'] }))
    .pipe($.rename({dirname:''}))

  return merge(
    js.pipe($.clone())
      .pipe($.sourcemaps.write('.'))
      .pipe(gulp.dest('app/scripts')),
    js.pipe($.clone())
      .pipe($.uglify())
      .pipe(gulp.dest('dist/scripts')));
});