使用Gulp替换块/占位符



.pipe使用Gulp 将dev.html转换为public.html时,我需要替换以下代码块

<!-- 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-->

包含minimiedCSSLinks.css的内容

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

minimiedJSLink.js

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

gulp-html-replacement、gulp-replacement或gulp-string-replacement可能会完成这项工作,但我不知道如何让它们简单地获取文件的内容(除了读取文件的内容并将其作为字符串传递给替换函数之外——我想相信模块可以做到这一点(。理想情况下,我希望在gullfile.js:中有这样的东西

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

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

好的,到目前为止我使用的是gulp-html-replace,因为它可以与<!-- build:<name> --> .. <!-- endbuild: -->块一起使用。我无法直接从文件中读取HTML(如果我忽略了这个选项,请告诉我(,所以我只将文件内容作为字符串传递:

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

相关内容

  • 没有找到相关文章

最新更新