Romych: /* Fingerprint */

2022-01-21T09:49:34Z

Fingerprint

Нова сторінка

←[[Hugo]]

С помощью Hugo Pipes можно делать сборку сайта без Gulp.

== SASS / SCSS ==

* Официальная документация: [https://gohugo.io/hugo-pipes/scss-sass/ SASS / SCSS]
* Пример использования: [[Hugo + Bootstrap]]

<source lang="html">
{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" >
</source>

Параметры '''ToCSS''':

* <code>targetPath</code> — если не указан, имя сгенерированного файла и путь к нему будет как у исходного файла с расширением, замененным на <code>.css</code>.
* <code>outputStyle</code> — форматирование CSS кода. Варианты:
** <code>nested</code> — по умолчанию — как <code>expanded</code>, но немного компактнее
** <code>expanded</code> — традиционный стиль форматирования
** <code>compact</code> — каждый стиль в одну строку
** <code>compressed</code> — все стили в одну строку
* <code>precision</code> — точность вычисления плавающей точки.
* <code>enableSourceMap</code> — создавать source map.
* <code>includePaths</code> — пути (относительно папки проекта) к дополнительным SCSS/SASS файлам. Например, можно указать <code>node_modules/bootstrap/scss</code> — тогда импорт стилей Bootstrap из этой папки можно будет делать без указаня полного пути — просто в виде <code>@import "functions";</code>

Параметры '''resources.Get''':

* <code>minify</code> — минифицировать. В имя результирующего файла будет добавлен суффикс <code>.min</code>
* <code>fingerprint</code> — добавить к имени файла уникальный номер (хеш файла)

Пример:

<source lang="html">
{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules/bootstrap/scss")) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" >
</source>

=== Минификация ===

В документации [https://gohugo.io/hugo-pipes/scss-sass/ сказано]: Setting <code>outputStyle</code> to <code>compressed</code> will handle SASS/SCSS files minification better than the more generic <code>resources.Minify</code>.

Сравнение размера файла с разными настройками:

{| cellpadding="7" border="1" style="border-collapse:collapse"
|-
! Без минификации !! С минификацией
|-
| 357658 style.expanded.css<br>364762 style.nested.css<br>'''290815''' style.compressed.css || 288504 style.min.expanded.css<br>288504 style.min.nested.css<br>'''288201''' style.min.compressed.css
|}

Видно, что параметр <code>outputStyle</code> сжимает файл хорошо, но все равно минификация <code>minify</code> делает это немного лучше.

А самый лучший результат получается при сочетании обоих параметров.

В следующем примере минификация включается только в режиме, когда не запущен <code>hugo server</code>.

<source lang="html">
{{- $scss := resources.Get "scss/main.scss" -}}
{{- $options := (dict "targetPath" "/css/style.css") -}}

{{- if eq hugo.Environment "development" -}}
{{- $options = merge $options (dict "outputStyle" "expanded") -}}
{{- $options = merge $options (dict "enableSourceMap" true) -}}
{{- $style := $scss | toCSS $options | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
{{- else -}}
{{- $options = merge $options (dict "outputStyle" "compressed") -}}
{{- $style := $scss | toCSS $options | fingerprint | minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
{{- end -}}
</source>

=== Fingerprint ===

Чтобы при обновлении стилей они применились в браузере, а не использовались закешированные, нужно добавлять к имени CSS файла уникальный суффикс — fingerprint.

<source lang="go">
{{ $css := resources.Get "css/main.css" | fingerprint }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" />
</source>

В таком случае ссылка на <code>css/main.css</code> будет иметь вид:

<source lang="html">
<link rel="stylesheet" href="/css/main.062818c8bff36c19f1e1761e92d34a8f87314791ec00ed704e028cda89b2c67c.css" />
</source>

По умолчанию используется хеш-функция '''sha256'''. Можно использовать [https://gohugo.io/hugo-pipes/fingerprint/ другие хеш-функции]:

'''— sha384'''

<source lang="go">
{{ $css := resources.Get "css/main.css" | fingerprint "sha384" }}
</source>
<source lang="html">
<link rel="stylesheet" href="/css/main.aa706e53b92fb6c8889365888c712a8125cc074cac2e37788f0deedd135a104e45017e75320b1cbaf7dc682683d1e45c.css" />
</source>

'''— sha512'''

<source lang="go">
{{ $css := resources.Get "css/main.css" | fingerprint "sha512" }}
</source>
<source lang="html">
<link rel="stylesheet" href="/css/main.76dd79e4715f8872903883a4f611732b64f795d1df1522fda397f513c120253a5afff130d6345346e6ab1ab4d2ae1e4c137023e27b04307cd9bb7093dbba7bd9.css" />
</source>

'''— md5'''

<source lang="go">
{{ $css := resources.Get "css/main.css" | fingerprint "md5" }}
</source>
<source lang="html">
<link rel="stylesheet" href="/css/main.8c679acf9d0d47fd3d997c1fe098f2e1.css" />
</source>

=== PostCSS ===

* Официальная документация: [https://gohugo.io/hugo-pipes/postcss/ PostCSS]

Параметры PostCSS:

* <code>config</code> — путь к конфигурационному файлу PostCSS
* <code>noMap</code> — по умолчанию true — отключить sourcemaps
* <code>inlineImports</code> — по умолчанию false — включить встраивание операторов @import. Работает рекурсивно, но импортирует файл только один раз. Игнорируется импорт URL (типа <code>@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');</code>) и импорт с media queries. Обратите внимание, что эта подпрограмма импорта не заботится о спецификации CSS, поэтому вы можете иметь @import в любом месте файла. Hugo будет искать импорт относительно точки монтирования модуля и будет учитывать переопределения темы.

Если нет конфигурационного файла, применяются параметры:

* <code>use</code> — список плагинов PostCSS для использования
* <code>parser</code> — Custom PostCSS parser
* <code>stringifier</code> — Custom PostCSS stringifier
* <code>syntax</code> — Custom PostCSS syntax

Попробуйте:

<source lang="html">
{{ $options := (dict "targetPath" "css/style.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "themes/simpleit/node_modules")) }}
{{ $style := resources.Get "scss/main.scss" | toCSS $options | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" >
</source>

== Ссылки ==

* [https://blog.fullstackdigital.com/how-to-automatically-generate-and-inline-critical-css-with-hugo-pipes-48c52c2d8f82 How to Automatically Generate and Inline Critical CSS with Hugo Pipes]
* [https://regisphilibert.com/blog/2018/07/hugo-pipes-and-asset-processing-pipeline/ Hugo Pipes Revolution, A Hugo built-in asset pipeline | Regis Philibert]
* [https://xdeb.org/post/2019/03/10/using-hugo-pipes-to-process-sass-and-cache-bust-css-and-js-files/ Using Hugo pipes to process sass and cache-bust css and js files – xdeb.org]
* [https://gohugo.io/news/0.43-relnotes/ And Now: Hugo Pipes! | Hugo]
* [https://discourse.gohugo.io/t/working-example-of-hugo-modules-and-bootstrap-scss-files/23090 Working example of Hugo Modules and Bootstrap .scss files? - support - HUGO]

[[Категория:Bootstrap]]
[[Категория:Sass]]

Hugo Pipes - Історія редагувань

Romych: /* Fingerprint */