使用模块打包器引用 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，这没有意义，因为style目录不存在于~/src/pages目录中。

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

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

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

Answer 1

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

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

你可以把html转成字符串，用.replace方法替换你想改的内容，最后把字符串解析成HTML文档。

希望对您有所帮助！！

Answer 2

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

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

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

Answer 3

文件名像hash的解决方法

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"))
);

使用模块打包器引用 html 中的内置文件

Referring to built files in html using module bundlers

html

gulp

build-system