Question

我正在使用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')

有什么可能的办法，还是我完全朝错误的方向前进？如果没有，我在哪里找？

Answer 1

您可以使用gulp-watch之类的东西来实时编译.scss文件，然后您的class IOP { public static void main (String[]args) { int sum =0; for (int i = 1; i<=5;i++) { for (int j =1;j<=i;j++) { sum = sum+j; System.out.print(j + " " ); } System.out.print(sum); System.out.println(); } } }文件将存在，并且在您修改/style/example.css时会自动重新编译

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

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

Answer 2

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

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

Answer 3

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

尽管如果您希望将文件路径作为scss的文件夹结构，那么在gulp将其转换为HTML后，您将不得不替换pug文件的内容。

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

希望这会有所帮助！

使用模块捆绑器在html中引用内置文件

3 个答案: