使用 Gulp 替换块/占位符答案

【问题标题】：Replace block/placeholder using Gulp使用 Gulp 替换块/占位符
【发布时间】：2020-04-28 08:50:02
【问题描述】：

当.pipe-ing dev.html 到 public.html 使用 Gulp

时，我需要替换以下代码块

<!-- replaceStart: nameOfBlock-css -->
  <link href="/css/one.css" />
  <link href="/css/two.css" />
  <link href="/css/three.css" />
<!-- replaceEnd-->

<!-- replaceStart: nameOfBlock-js -->
  <link href="/js/one.js"/>
  <link href="/js/two.js/>
<!-- replaceEnd-->

包含 minifiedCSSLinks.css

的内容

<link href="/css/oneTwoThree.min.css" />

和minifiedJSLink.js

<link href="/js/oneTwo.min.js" />

gulp-html-replace、gulp-replace 或 gulp-string-replace，可能会完成这项工作，但我不知道如何让它们简单地获取文件的内容（除了读取文件的内容并传递给替换函数一个字符串 - 我想相信模块可以做到这一点）。理想情况下，我希望在 gulpfile.js 中有这样的内容：

gulp.src('default.html')
.replace({nameOfBlock-css: 'minifiedCSSLinks.html'})
.replace({nameOfBlock-js: 'minifiedJSLinks.html'})
...

编辑：*.min.css|js 脚本和样式将通过原始 *.css|js 的连接和缩小来创建。原始文件在开发时使用，而缩小的输出将在生产中使用。因此，在 Gulp 构建过程中，也需要更改 html 文件中的链接标签以反映这一点，并指向新创建的 *.min 文件。

【问题讨论】：

您的示例中的oneTwoThree.min.css 是否已经存在，或者这实际上是构建过程的一部分？你的问题有点不清楚。如果不是，它看起来像 gulp-html-replace 基本上可以满足您的要求，只是语法略有不同。

标签： replace gulp gulp-replace

【解决方案1】：

好的，到目前为止，我正在使用 gulp-html-replace，因为它适用于  ..  块。我不能让它直接从文件中读取 HTML（如果我忽略了这个选项，请告诉我），所以我只是将文件内容作为字符串传递：

gulp.src('default.html')
.replace({nameOfBlock-css: fs.readFileSync('minifiedCSSLinks.html', 'utf8')})
.replace({nameOfBlock-js: fs.readFileSync('minifiedJSLinks.html', 'utf8')})
...

【讨论】：