npmをビルドツールとして使えないか調べます。
- Congoテーマをいじっていると、TailwindCSSに使えない要素があったりする
- カスタムCSSに同等の内容を追記すれば対処は可能だけれど…
- CongoにあるCSSは必要な分しか載っていないので、追加の要素が欲しいならTailwindCSSをビルドし直す必要があるらしい
- せっかくなので、npmをビルドツールとして使えるようにしたい
- ファイルを監視して前処理を行うこともできるようになるはず
TailwindCSSをビルドさせるまでの手順#
winget install nodejsでNode.jsでインストールするnpm install --save-dev tailwindcss@^3 @tailwindcss/typography @tailwindcss/cliでTailwindCSSを依存関係に追加する@^3はCongoが依存するv3（の最新版）を指定する--save-devはそのパッケージを開発用として記録する
- 以下のような
tailwind.config.jsを作る
module.exports = {
presets: [require("./themes/congo/tailwind.config.js")],
content: [
"./layouts/**/*.html",
"./content/**/*.{html,md}",
"./themes/congo-mod/layouts/**/*.html",
"./themes/congo/layouts/**/*.html",
],
};npx @tailwindcss/cli -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jitでビルドするBrowserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latestと出てくるが、指示通りやってもまた出るので、とりあえず無視した
npmからHugoをビルドさせるには#
package.jsonのscriptsプロパティに{"<name>": "<command>"}と書くと、npm run <name>が<command>をシェル上で実行するようになる- スクリプト名は任意に決められる
pre<name>やpost<name>というスクリプトを定義すると、<name>を実行する前後にそれぞれ実行されるnpm run <name> A -- Bと書くと、Aはnpm側の引数として、Bはスクリプト側の引数として渡される
npm installやnpm startなどは特定の名前のスクリプトを所定のタイミングで呼び出す- 例えば、
npm startはprestart、start、poststartの順でスクリプトを呼び出す
- 例えば、
- Hugoと合わせて使う場合、例えば
package.jsonを以下のようにする
{
"scripts": {
"start": "hugo server -M",
"build": "hugo --minify"
}
}