0

我目前正在开发一个小型网站,使用了一个包含 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 函数中传递一个参数并在循环中运行它。我对选择不同目录的复制功能有同样的作用,但我认为这将是相同的过程。

任何帮助,将不胜感激 :)

爱德华

4

1 回答 1

0

最后,我遇到了关于 gulp 缓存来自第一个网站的一些资产的问题,这些资产必须在其他网站上进行更改。使用 gulp 选项禁用缓存会导致其他问题。

我找到的解决方案不是在同一个 gulp 文件中生成所有站点,而是使用本文中解释的参数。我知道不建议这样做,但它在这里对我有用。

于 2020-09-04T15:54:51.857 回答