已解决-gulp：为网站构建多个dist，每个dist都有自己的自定义js

问题描述

我目前正在开发一个小型网站，使用的引导模板包括我刚接触的gulp。 gulpfile已经具有构建功能，可以为最终网站构建dist目录。

诀窍在于，我想建立多个网站，这些网站会因我要在某些页面上加载的javascript文件的内容而异，因此我已经准备好其中的6个javascript文件。

我发现html文件中的gulp部分可以正常工作：

    @@if (context.test == 1) {
      @@include("partials/scripts_shop_1.html")
    }
    @@if (context.test == 2) {
      @@include("partials/scripts_shop_2.html")
    }
    and so on...

我的gulp文件看起来像这样

gulp.task('copy:all',function() {
  return gulp
    .src([
      paths.src.base.files,'!' + paths.src.partials.dir,'!' + paths.src.partials.files,'!' + paths.src.scss.dir,'!' + paths.src.scss.files,'!' + paths.src.tmp.dir,'!' + paths.src.tmp.files,'!' + paths.src.js.dir,'!' + paths.src.js.files,'!' + paths.src.css.dir,'!' + paths.src.css.files,'!' + paths.src.html.files
    ])
    .pipe(gulp.dest(paths.dist.base.dir));
});

gulp.task('copy:libs',function() {
  return gulp.src(npmdist(),{
    base: paths.base.node.dir
  }).pipe(gulp.dest(paths.dist.libs.dir));
});
gulp.task('html',function() {
  return gulp
    .src([paths.src.html.files,'!' + paths.src.partials.files])
    .pipe(
      fileinclude({
        prefix: '@@',basepath: '@file',indent: true,context: {'test': 1}
      })
    )
    .pipe(replace(/href="(.{0,10})node_modules/g,'href="$1assets/libs'))
    .pipe(replace(/src="(.{0,'src="$1assets/libs'))
    .pipe(useref())
    .pipe(cached())
    .pipe(gulpif('*.js',uglify()))
    .pipe(gulpif('*.css',cleancss()))
    .pipe(gulp.dest(paths.dist.base.dir));
});

gulp.task(
  'build',gulp.series(
    gulp.parallel('clean:tmp','clean:dist','copy:all','copy:libs'),'scss','html'
  )
);

您可以看到测试参数，该参数可以让我知道要在html文件中加载哪个版本的脚本。

我想做的是能够执行一次gulp任务，一次构建所有6个网站，以便能够在html函数中传递参数并使其循环运行。复制功能选择不同的目录与我有相同的操作，但我认为将遵循相同的过程。

任何帮助将不胜感激：）

爱德华

解决方法

最后，我遇到了有关从第一网站缓存某些必须更改其他资产的资产的问题。使用gulp选项禁用缓存会导致其他问题。

我发现的解决方案不是在同一个gulp文件中生成所有站点，而是使用this文章中所述的参数。我了解不建议您这样做，但在这里对我有用。