hugo pipes parcel

新的動態 Hugo Starter - Hugo Pipes 設定與 Parcel。

請注意，此儲存庫僅涉及演示資產管道，而不被視為完整的啟動器。按照您的意願進行操作，但請記住，這裡的所有內容都是為我們的內部工作流程設計的。

我們在所有專案中都使用變更日誌。請參閱該文件以獲取更新。

工具

• Hugo - 一個用 Go 編寫的通用網站框架，可產生靜態網頁。
• Parcel - 一個「極快」的、零配置的 Web 應用程式捆綁器。
• PostCSS | TailwindsCSS（基於 JS 的 CSS 類別庫）| PurgeCSS（刪除未使用的 CSS）
• KyleAMathews/typefaces（只需一點點require即可在本地加載作業系統字體）

Hugo 資產管道

此設定利用 Parcel 進行 Javascript 和開源字體處理，利用 Hugo Pipes + PostCSS 進行 CSS 處理，並使用npm-run-all並行運行 Parcel 和 Hugo（請參閱下面的註釋）。我們使用 Yarn 套件管理器，但如果您願意，也可以使用 NPM。

這個資產管道是我們從使用 Webpack 處理 JS/Fonts/CSS 的轉變。 Parcel 是一個類似於 Webpack 的捆綁器，但作為靈活性稍差的代價，它的配置和文件佔用空間更小，並且構建速度更快；事實上，Parcel 沒有設定檔。使用 Hugo 建立 CSS 的轉變允許 Hugo 網站在外部建立流程之外進行開發。這種方法有一些缺點，如下所述。

筆記：

• 此配置是圍繞 JS/字體在開發中處理而不是在生產中處理的假設而構建的，儘管這樣做只需花費很少的精力。
• package.json中的腳本包括使用cross-env載入環境變量，這對於某些系統（不是 Windows）是可選的，並且可以安全地刪除。只需將cross-env NODE_ENV=development替換為NODE_ENV=development

JS

• 使用包裹捆綁器。
• 將輸出打包到assets/output/index.js 。
• Hugo 用於指紋識別並為子資源完整性建立安全雜湊。
  • 如果fileExists "./assets/output/index.js Hugo 從layouts/_head/scripts.html建立該檔案的雜湊值。
• Hugo 將處理後的 JS 檔案輸出到public/output/index.min.[hash].js 。

CSS

• 使用 Hugo Pipes，利用 PostCSS。注意：我們使用此方法是因為我們使用實用程式級 CSS。否則我建議您使用 Parcel 來處理 CSS。請參閱下面的「如何切換到運行基於 JS 的 PostCSS」。
• 預設使用 Parcel/PostCSS。請參閱下面的「如何切換到基於 Hugo 的 PostCSS」。

CSS 透過 Hugo

• Hugo 使用Imports、TailwindCSS、Autoprefixer 和PurgeCSS 處理assets/css/styles.css和assets/postcss.config.js 。
• 如果建置指令中存在NODE_ENV=development ，PostCSS 將不會透過 PurgeCSS 處理該檔案。
• Hugo 將處理後的 CSS 檔案輸出到public/css/styles.min.[hash].css 。

透過 Parcel 的 CSS

• Parcel 使用assets/postcss.config.js處理assets/css/styles.css ，利用 Imports、TailwindCSS、Autoprefixer 和 PurgeCSS。
• 如果建置指令中存在NODE_ENV=development ，PostCSS 將不會透過 PurgeCSS 處理該檔案。
• Hugo 將處理後的 CSS 檔案輸出到assets/output/index.[hash].css 。

字體

• 透過 Typefaces 的開源字體使用 Parcel Bundler。
• Parcel 將 CSS 輸出到assets/output/index.css ，並將經過雜湊處理的字體檔案放在同一目錄中。
• Hugo Pipes 將檔案處理到公共目錄中並建立預取連結。
  • 如果fileExists "./assets/output/index.css Hugo 從layouts/_head/stylesheets.html建立預取連結。
• Hugo 將處理後的字型和 CSS 檔案輸出到public/output/index.min.[hash].css和public/output/font-name.[hash].woff[2] 。

圖片

• 儲存在 S3 儲存桶或儲存庫本機的資產，透過 Imgix 進行轉換。

待辦事項

• 考慮 _header 中的資源以進行快取和預先載入（Scratch 是否可行）。
• 確保我們的 package.json 指令設定正確。
• 確定管理未使用 Typography 套件呼叫的字體（即商業字體）的工作流程。

使用Hugo處理PostCSS的優缺點

優點

• 不必運行 JS 來更改 CSS，消除了建立 CSS 時的時序不匹配。
• 開發更新速度更快。

缺點

• 必須安裝 Node 模組才能執行 Hugo。
• 必須運行 PostCSS（帶有 Node 模組）才能在伺服器上進行構建，並在每次更改時構建 CSS。
• 除了為字體生成的任何 CSS 檔案之外，請為主要樣式建立單獨的 CSS 檔案。

如何切換到運行基於 Hugo 的 PostCSS

• 將主 CSS 檔案刪除到assets/index.js 。
• 更改 Tailwind 導入以透過 @import 呼叫 tailwind，而不是直接呼叫。
• 更改初始CSS檔案layouts/_head/stylesheets.html以使用Hugo（請參閱該文件中的註釋）。