抢先运行不同的任务，然后保存到不同的输出

Question

I'm trying to map the result of flattened JavaScript files to two different locations, but I want to do some extra processing on them first. The problem I have is those extra bits are completely different for each.

Here is what I've tried. I want to include a source map when saving the output to app/scripts , but I want to not include the source map, but uglify them when saving it to 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'));
})

This snippet doesn't do what I want because the result of creating a source map is passed on to the rest of the flow (Besides that, it is actually crashing saying Unhandled stream error in pipe ). I want to do this using only the same task. How do I do that?

Answer 1

The way you're using gulp-sourcemaps is all wrong. Transformations that should be recorded in source maps must happen between sourcemaps.init() and sourcemaps.write() . Additionally gulp-flatten does not support sourcemaps . Luckily for you you can achieve the same with using gulp-rename .

The reason you're getting that error is because you're trying to uglify() your source map files. Since those obviously don't contain valid JS uglify 's parser throws up.

The way to solve all this is to simply store your stream in a variable and then .pipe() it to two different destinations. However since the underlying vinyl files are shared between the two resulting streams you need to first clone them using gulp-clone . Otherwise the same files will end up in both destinations.

Finally you use merge-stream to merge the two resulting streams so you can return them from your task.

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