gulp:为网站构建几个dist，每个dist都有自己的自定义js

Question

我目前正在开发一个小型网站，使用了一个包含gulp的引导模板，我对它还很陌生。gulpfile已经有了一个构建函数，可以为最终的网站构建dist目录。

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

我在html文件上找到了可以正常工作的部分：

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

我的gull文件看起来像

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.tmp.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,10})node_modules/g, '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文件中加载哪个版本的脚本。

我想做的是能够有一个一次性构建所有6个网站的gullow任务，因此能够在html函数中传递一个参数并在循环中运行它。我用复制功能选择不同的目录有同样的事情要做，但我认为这将是同样的过程。

如有任何帮助，我们将不胜感激：(

Edward

Answer 1

最后，我遇到了从第一个网站缓存一些资产的问题，这些资产必须在其他网站上更改。使用gullow选项禁用缓存会导致其他问题。

我发现的解决方案不是在同一个gump文件中生成所有站点，而是使用本文中解释的参数。我知道这是不推荐的，但它在这里对我有效。