使用模块捆绑器引用 html 中的构建文件答案

【问题标题】：Referring to built files in html using module bundlers使用模块捆绑器引用 html 中的构建文件
【发布时间】：2019-02-14 16:32:04
【问题描述】：

我正在使用 Gulp 为我的静态网站构建我的 SCSS、Pug 和 ES6 资产。我知道可以散列文件名并将文件输出到不同的目录中。

对于我的具体例子：

我的 Pug 降价在 ~/src/pages 目录中找到并构建到 ~/public/ 目录中。
我的 SCSS 样式表位于 ~/src/stylesheets 目录中。这些正在构建并获取~/public/style 目录

我的问题是，当我从 Pug 引用我的样式表文件时，我必须像这样引用已经构建的文件夹：

link(rel='stylesheet', href='./style/example.css')

对于我的 IDE，这没有意义，因为 style 目录在 ~/src/pages 目录中不存在。

我觉得最有用的是我可以参考我的样式表，如下例所示：

link(rel='stylesheet', href='../stylesheets/example.scss')

有什么办法可以做到这一点，还是我完全走错了方向？如果没有，我在哪里找？

【问题讨论】：

标签： html gulp build-system

【解决方案1】：

使文件名像哈希的解决方案

gulp，用于自动化我们的任务
gulp-rev，用于使用随机哈希重命名我们的文件。
gulp-rev-collector，用于通过我们文件中的散列引用切换非散列引用。
rev-del，用于删除 /dist 文件夹中的非散列文件。

示例代码：

gulpfile.js

gulp.task("revision:rename", ["serve"], () =>
  gulp.src(["dist/**/*.html",
            "dist/**/*.css",
            "dist/**/*.js",
            "dist/**/*.{jpg,png,jpeg,gif,svg}"])
  .pipe(rev())
  .pipe(revdel())
  .pipe(gulp.dest("dist"))
  .pipe(rev.manifest({ path: "manifest.json" }))
  .pipe(gulp.dest("dist"))
);

manifest.json

{
  style.css: style-ds9udjvci.css,
  main.js: main-dijds9xc9.min.js
}

用于在文件中创建我们的修订更新，例如将 manifest.json 的每个键的每个引用重写为每个 html/json/css/js 文件中的相应值(i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)

gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
  gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
 .pipe(collect())
 .pipe(gulp.dest("dist"))
);

【讨论】：

【解决方案2】：

你可以使用gulp-watch之类的东西来实时编译你的.scss文件，那么你的/style/example.css文件就会存在，当你修改example.scss时它会自动重新编译

您可能需要移动一些目录来链接所有内容，但您也可以使用 watch 来构建您的 Pug 文件，因此您的网站将始终保持最新状态。

基本上，您可以对项目中的任何文件进行更改并实时查看更新。

【讨论】：

【解决方案3】：

Gulp 无法自动更改 html 中使用的文件路径。因此，您必须使用生成的文件路径来访问样式文件。

虽然如果你想将文件路径作为你的 scss 的文件夹结构，那么你将不得不在 gulp 完成将 pug 文件转换为 HTML 之后替换它的内容。

您可以将 html 转换为 String 并使用 .replace 方法替换您想要更改的任何内容，最后将字符串解析为 HTML 文档。

希望这会有所帮助！

【讨论】：