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

Question

我正在使用Gulp为我的静态网站构建我的SCSS，Pug和ES6资产。我知道可以对文件名进行哈希处理并将文件输出到不同的目录中。

对于我的具体示例：

• 我的 Pug markdown 可以在~/src/pages目录中找到并构建到~/public/目录中。
• 我的 SCSS 样式表可在~/src/stylesheets目录中找到。这些正在构建并获取~/public/style目录

我的问题是，当我引用来自 Pug 的样式表文件时，我必须引用已经构建的文件夹，如下所示：

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

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

我发现最有用的是我可以参考我的样式表，如下所示：

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

有什么办法是可能的，还是我完全走错了方向？如果没有，我在哪里寻找？

Answer 1

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

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

示例代码：

古尔普文件.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"))
);

Answer 2

您可以使用gulp-watch之类的东西来实时编译.scss文件，然后您的/style/example.css文件将存在，并且在您修改时会自动重新编译example.scss

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

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

Answer 3

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

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

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

希望这有帮助！！