Gulp同glob源文件多目标输出时如何合并不同base配置的任务

核心思路 #

仅执行一次文件读取、sass编译、sourcemap生成逻辑，将编译后的流分流输出到两个目录，同时针对两个目录的不同base规则做路径适配，避免重复执行编译逻辑提升性能。

实现方案 #

方案1：流分流实现（性能最优） #

仅执行一次编译逻辑，适合文件量较大的场景，需安装gulp-clone插件实现流克隆，避免两个输出分支互相干扰：

1. 安装依赖

npm install gulp-clone gulp-rename --save-dev

2. 合并后代码

const clone = require('gulp-clone');
const rename = require('gulp-rename');
var moduleglob = 'some/path/more/' + themeconfig.name + '/' + '**/**/styles/some.scss';

// 一次完成全量编译逻辑
const compiled = gulp.src(moduleglob, { base: './' })
  .pipe(sourcemaps.init({ loadMaps: true }))
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write('./'));

// 分支1：输出到根目录，和原有逻辑完全一致
compiled.pipe(gulp.dest('.'));

// 分支2：克隆流后调整base，输出到pubdir
compiled
  .pipe(clone())
  .pipe(rename(function (file) {
    // 重置base为glob默认前缀，匹配原任务未传base的输出规则
    const defaultBase = 'some/path/more/' + themeconfig.name + '/';
    file.base = file.cwd + defaultBase;
  }))
  .pipe(gulp.dest(pubdir));

方案2：无额外插件实现 #

如果不想安装新依赖，可以把编译逻辑封装为公共函数，调用两次即可，代码维护成本很低：

var moduleglob = 'some/path/more/' + themeconfig.name + '/' + '**/**/styles/some.scss';

// 封装公共编译逻辑
function compileSass(srcOptions, destPath) {
  return gulp.src(moduleglob, srcOptions)
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(destPath));
}

// 单任务同时执行两个输出（兼容gulp3/gulp4）
gulp.task('build-styles', function(cb) {
  let finishCount = 0;
  function checkFinish() {
    if (++finishCount === 2) cb();
  }
  compileSass({ base: './' }, '.').on('end', checkFinish);
  compileSass({}, pubdir).on('end', checkFinish);
});

内容的提问来源于stack exchange，提问作者Shashank Bhatt