Romych: /* Сборка Tailwind скриптами NPM */

2022-01-18T15:51:06Z

Сборка Tailwind скриптами NPM

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

← [[Hugo]]<br>
← [[Tailwind]]

'''Репозиторий с готовым решением''': https://gitlab.com/zina.design/hugo-tailwind

Tailwind работает как плагин PostCSS. Hugo умеет выполнять PostCSS через [https://gohugo.io/hugo-pipes/postcss/ Hugo Pipes], но не всё — например, не умеет [https://github.com/SassNinja/postcss-extract-media-query postcss-extract-media-query].

Задача: настроить работу с Tailwind по схеме:

* в режиме <code>development</code> — только генерация полного CSS и максимально быстрая отзывчивость;
* в режиме <code>production</code> — обработка полного CSS:
** <code>purgecss</code> для очистки от неиспользуемых классов
** <code>postcss-extract-media-query</code> для разбивки CSS на отдельные файлы по Media Query (пример: https://gitlab.com/zina.design/zina-tailwind)
** минификация всех HTML и CSS файлов.

Используем связку: Hugo + Tailwind CLI + [http://prgssr.ru/development/pochemu-npm-skripty.html NPM Scripts]

== Сборка Tailwind скриптами NPM ==

Сборка Tailwind скриптами NPM — делается до запуска Hugo:

* в режиме '''dev''' — средствами Tailwind, чтобы можно было использовать JIT,
* в режиме '''prod''' — средствами PostCSS, чтобы можно было использовать <code>postcss-extract-media-query</code> (см. ниже).

<code>package.json</code>:

<source lang="javascript">
"config": {
"csspath": "./assets/tailwind/tailwind.css -o ./assets/css/tailwind.css"
},
"scripts": {
"css:dev": "tailwindcss -i $npm_package_config_csspath",
"css:prod": "cross-env NODE_ENV=production postcss $npm_package_config_csspath",
}
</source>

В Hugo только минифицируем и добавляем fingerprint.

<source lang="go">
{{- $tailwind := resources.Get "css/tailwind.css" -}}
{{- if eq hugo.Environment "production" -}}
{{- $tailwind = $tailwind | minify | fingerprint -}}
{{- end -}}
</source>
<source lang="html">
<link rel="stylesheet" href="{{ $tailwind.RelPermalink }}" />
</source>

'''Media Query CSS'''

Если в <code>postcss.config.js</code> включен плагин <code>postcss-extract-media-query</code>, то во время сборки CSS средствами PostCSS генерируются отдельные файлы вида <code>min-width-1024-px.css</code> с кодом типа:

<source lang="css">
@media (min-width: 1024px) {
...
}
</source>

В Hugo мы берем все эти файлы из папки, указанной в <code>postcss.config.js</code> — типа:

path: path.join(__dirname, 'assets/css/mq')

сортируем их в естественном порядке (чтобы <code>min-width-1024-px.css</code> был после <code>min-width-768-px.css</code>, а не наоборот), минифицируем и добавляем fingerprint.

<source lang="go">
{{- if eq hugo.Environment "production" -}}
{{- $mqFilesSorted := slice -}}
{{- $mqSizes := slice 0 -}}
{{- range $index, $element := (sort (readDir "assets/css/mq") "Name") -}}
{{ $mqSizes = $mqSizes | append (replaceRE "^min-width-(.+)-px.css$" "$1" .Name) -}}
{{- end -}}
{{- range $index, $element := (after 1 (sort $mqSizes)) -}}
{{- $mqFile := resources.Get (printf "css/mq/min-width-%s-px.css" . ) | resources.ExecuteAsTemplate (printf "css/min-width-%s-px.css" .) $ | minify | fingerprint -}}
{{- $mqFilesSorted = $mqFilesSorted | append $mqFile -}}
{{- end -}}
{{- range $mqFilesSorted }}
<link rel="stylesheet" href="{{ .RelPermalink }}" media="screen and (min-width: {{ replaceRE "^css/mq/min-width-(.+)-px.css$" "$1" .Name }}px)" />
{{ end }}
{{- end -}}
</source>

== Сборка Tailwind средствами Hugo ==

* Источник: https://discourse.gohugo.io/t/adding-tailwindcss/24001

<source lang="go">
{{- $tailwind := resources.Get "tailwind/tailwind.css" -}}
{{- $options := dict "inlineImports" true -}}
{{- $tailwind = $tailwind | resources.PostCSS $options -}}
{{- if eq hugo.Environment "production" -}}
{{- $tailwind = $tailwind | minify | fingerprint -}}
{{- end }}
</source>
<source lang="html">
<link href="{{ $tailwind.RelPermalink }}" rel="stylesheet" />
</source>

== См. также ==

* [https://praveenjuge.com/blog/install-tailwind-on-hugo/ Install Tailwind on Hugo | Praveen Juge] — есть минимальная конфигурация шаблонов Hugo
* [https://htr3n.github.io/2018/07/minimal-hugo-workflow/ A mininal Hugo blogging workflow] — NPM скрипты и Hugo

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

Romych: /* Сборка Tailwind скриптами NPM */