利用 Hugo Pipes 处理资源文件-阳明的博客|Kubernetes|Istio|Prometheus|Python|Golang|云原生

Hugo是一个非常强大的静态博客生成工具，没错你们正在看的本博客也是用Hugo来生成的博客文章。作为一个对速度有着强烈要求的博主，整个网站使用的阿里云的全站加速功能，虽然博客上图片资源不算少，但是大部分用户访问的时候应该速度不算太慢，为了能够进一步提升访问速度，自然而然想到的就是对 CSS 样式或者 JS 文件进行合并压缩了。

介绍

对前端稍微熟悉点的同学应该知道有很多工具可以完成 CSS 或者 JS 的压缩合并，比如 webpack、gulp 等等，但是要使用这些工具就得引入第三方的工具包了，还得写特定的配置文件，比如webpack.config.js文件，而且对于 webpack 还是有一定学习成本的，对于有多年前端开发经验的同学都不一定能够很好的使用 webpack。

幸运的是 Hugo 为我们提供了内置的功能：Hugo Pipes，一套专门用来处理资源文件的函数集合。使用 Hugo Pipes 有几个需要注意的点：

Asset 文件夹：Asset 文件必须存储在 asset 文件夹下面，默认是/assets，当然我们可以通过配置文件中的asetDir参数进行配置
通过文件获取资源：为了通过 Hugo Pipes 处理文件，必须使用resources.Get获取解析资源，该函数需要传递一个 asset 目录下面的文件的相对路径，比如：

{{ $style := recourses.Get "sass/main.scss" }}

发布 Asset：在我们执行了hugo命令后，如果我们使用了.Permalink或者.RelPermalink，assets 资源文件会被发布到/public目录下面去。

管道操作：为了提高可读性，Hugo Pipes 通过使用 Go 管道符来进行操作，如下面的命令就可以将 scss 文件转换成 css，然后压缩

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify
| resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" />

recources.Fingerprint，这个函数可以用于进行资源的指纹识别和 SRI 校验，通过一个散列函数生成一个 hash 值。

使用

比如在我们的博客页面中，每个页面都需要引入 4 个 CSS 样式文件：bootstrap.css、main.css、search.css、reward.css，我们将这 4 个样式文件放置在主题根目录下面assets/css下，然后在 partials 目录下面新建文件 css-assets.html，内容如下所示：

<!-- Bootstrap Core CSS -->
{{- $bootcss := resources.Get "css/bootstrap.css" -}}

<!-- Theme CSS -->
{{- $maincss := resources.Get "css/main.css" -}} {{- $searchcss := resources.Get
"css/search.css" -}}

<!-- Custom asset css -->
{{- $indexScratch := .Scratch -}} {{- $indexScratch.Add "cssassets" (slice
$bootcss $maincss $searchcss) -}} {{ if .Site.Params.reward }} {{- $rewardcss :=
resources.Get "css/reward.css" -}} {{- $indexScratch.Add "cssassets" (slice
$rewardcss) -}} {{ end }} {{- range .Site.Params.customCSSAssets -}} {{-
$indexScratch.Add "cssassets" (slice (resources.Get .)) -}} {{- end -}}

<!-- Bundle css -->
{{- $appcss := $indexScratch.Get "cssassets" | resources.Concat "css/bundle.css"
| resources.Minify | resources.Fingerprint -}} {{- .Scratch.Set "appcss"
$appcss.RelPermalink -}} {{- .Scratch.Set "appcssintegrity"
$appcss.Data.Integrity -}}

这里使用到了一个.Scratch函数，该函数非常重要，可以在模板之间进行参数传递，用 Add、Get、Set 等方法，具体使用可以参考文档：https://gohugo.io/functions/scratch。

我们这里就是通过.Scratch方法将 Assets 资源文件添加到一起，然后通过 Go 管道进行合并、压缩、和获取指纹数据等，最好通过.Scratch.Set设置了最后的 CSS 样式的路径参数，这样我们就可以在别的模板中通过.Scratch.Get来获取样式的路径了。

比如我们这里在模板文件partials/head.html的<head>区域添加如下代码：

<!-- CSS from hugo pipes -->
{{- partial "css-assets.html" . -}}
<link
  rel="stylesheet"
  href='{{ .Scratch.Get "appcss" }}'
  integrity='{{ .Scratch.Get "appcssintegrity" }}'
/>

这样我们就获取到了 Hugo Pipes 处理过后的资源文件了，通过执行hugo命令，我们可以发现目录public/css下面多了一个名为bundle.min.8db0ca8922d045902af41f7c49c511fb32ec40827c92aeff990760820f2a475c.css的文件，我们可以打开查看下里面是压缩合并过后的 CSS 样式，同样，可以在页面中查看到引入的代码变成了下面的样式：

<link
  rel="stylesheet"
  href="https://www.qikqiak.com/css/bundle.min.8db0ca8922d045902af41f7c49c511fb32ec40827c92aeff990760820f2a475c.css"
  integrity="sha256-jbDKiSLQRZAq9B98ScUR&#43;zLsQIJ8kq7/mQdggg8qR1w="
/>

到这里就大功告成了，我们通过 Hugo Pipes 将多个 CSS 样式文件进行了合并打包、压缩，并且没有使用第三方的工具包，大家可以用同样的方法去对 JS 文件进行打包压缩，然后看下文章中的效果是否生效了？

微信公众号

扫描下面的二维码关注我们的微信公众帐号，在微信公众帐号中回复◉加群◉即可加入到我们的 kubernetes 讨论群里面共同学习。

「真诚赞赏，手留余香」

利用 Hugo Pipes 处理资源文件

利用 Hugo Pipes 处理资源文件

标签: Hugo Pipes webpack

介绍

使用

微信公众号

相关文章