Hugo Pipes

Матеріал з Wiki.Zina
Версія від 09:49, 21 січня 2022, створена Romych (обговорення | внесок) (→Fingerprint)
(різн.) ← Попередня версія | Поточна версія (різн.) | Новіша версія → (різн.)
Перейти до навігації Перейти до пошуку

←Hugo

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

SASS / SCSS

[ред. | ред. код]
{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" >

Параметры ToCSS:

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

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

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

Пример: 

{{ $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 }}" >

Минификация

[ред. | ред. код]

В документации сказано: Setting outputStyle to compressed will handle SASS/SCSS files minification better than the more generic resources.Minify.

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

Без минификации С минификацией
357658 style.expanded.css
364762 style.nested.css
290815 style.compressed.css		 288504 style.min.expanded.css
288504 style.min.nested.css
288201 style.min.compressed.css

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

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

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

{{- $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 -}}

Fingerprint

[ред. | ред. код]

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

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

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

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

По умолчанию используется хеш-функция sha256. Можно использовать другие хеш-функции:

— sha384 

{{ $css := resources.Get "css/main.css" | fingerprint "sha384" }}

<link rel="stylesheet" href="/css/main.aa706e53b92fb6c8889365888c712a8125cc074cac2e37788f0deedd135a104e45017e75320b1cbaf7dc682683d1e45c.css" />

— sha512 

{{ $css := resources.Get "css/main.css" | fingerprint "sha512" }}

<link rel="stylesheet" href="/css/main.76dd79e4715f8872903883a4f611732b64f795d1df1522fda397f513c120253a5afff130d6345346e6ab1ab4d2ae1e4c137023e27b04307cd9bb7093dbba7bd9.css" />

— md5 

{{ $css := resources.Get "css/main.css" | fingerprint "md5" }}

<link rel="stylesheet" href="/css/main.8c679acf9d0d47fd3d997c1fe098f2e1.css" />

PostCSS

[ред. | ред. код]
  • Официальная документация: PostCSS

Параметры PostCSS:

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

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

  • use — список плагинов PostCSS для использования
  • parser — Custom PostCSS parser
  • stringifier — Custom PostCSS stringifier
  • syntax — Custom PostCSS syntax

Попробуйте: 

{{ $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 }}" >

Ссылки

[ред. | ред. код]
Отримано з https://mediawiki.zina.run/index.php?title=Hugo_Pipes&oldid=809