使用模块绑定器引用html中的内置文件

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

就我的具体例子而言：

• 我的哈巴狗标记可以在

  ~/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')

---

这有可能吗？还是我完全走错了方向？如果没有，我在找什么？

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

虽然如果您希望将文件路径作为SCS的文件夹结构，但在gulp将其转换为HTML后，您必须替换pug文件的内容

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

---

希望这有帮助

您可以使用类似的工具来实时编译.scss文件，然后您的

/style/example.css

文件将存在，并且当您修改

example.scss

时，它将自动重新编译

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

---

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

将文件名设置为哈希的解决方案

• 大口大口地喝，因为我们的任务自动化了
• ，用于使用随机哈希重命名我们的文件
• ，用于通过文件中的散列引用切换非散列引用
• ，用于删除/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文件中的相应值

（即：将变为）

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