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+zLsQIJ8kq7/mQdggg8qR1w="
/>
到这里就大功告成了,我们通过 Hugo Pipes 将多个 CSS 样式文件进行了合并打包、压缩,并且没有使用第三方的工具包,大家可以用同样的方法去对 JS 文件进行打包压缩,然后看下文章中的效果是否生效了?
微信公众号
扫描下面的二维码关注我们的微信公众帐号,在微信公众帐号中回复◉加群◉即可加入到我们的 kubernetes 讨论群里面共同学习。
「真诚赞赏,手留余香」
请我喝杯咖啡?
使用微信扫描二维码完成支付