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（请参阅该文件中的注释）。