使用模塊捆綁器引用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-watch之類的東西來實時編譯/style/example.css文件，然后您的/style/example.css文件將存在，並且當您修改example.scss時它將自動重新編譯

您可能需要移動一些目錄以獲取要鏈接的所有內容，但您也可以使用watch來構建您的Pug文件，因此您的站點將始終是最新的。

基本上，您對項目中的任何文件進行更改並實時查看更新。

Answer 2

使文件名像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文件中的相應值(ie: <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無法自動更改htmls內使用的文件路徑。 因此，您必須使用生成的文件路徑來訪問樣式文件。

雖然如果您希望將文件路徑作為scss的文件夾結構，那么在gulp將其轉換為HTML后，您將不得不替換pug文件的內容。

您可以將html轉換為String並使用.replace方法替換您想要更改的任何內容，最后將字符串解析為HTML文檔。

希望這可以幫助！！