我目前正在开发一个小型网站,使用了一个包含 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.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 个网站的 gulp 任务,因此能够在 html 函数中传递一个参数并在循环中运行它。我对选择不同目录的复制功能有同样的作用,但我认为这将是相同的过程。
任何帮助,将不胜感激 :)
爱德华