静的サイト制作時におすすめのタスク自動化ツール構成 npm+Nunjucks+Stylus を紹介します。
各ツールの簡単な紹介
[npm]
Node.jsのパッケージマネージャー。Node.jsをインストールすると自動的にインストールされる。
[Nunjucks]
javascripで使用するテンプレートエンジン。Mozillaが開発している。
[Stylus]
Node.js製のCSSプリプロセッサ。
前提条件があります
満たしていなければ用意してください
- nodeインストール済み
- [Windowsのみ]Linuxツールインストール済み（※WSLが使用可、gitbashでも可）
最終的にどう動くか
この構成ではsrcディレクトリ内のファイルを更新すると各タスクが処理されdistフォルダに完成品が吐き出されます。
javascriptはsrcフォルダのjsファイルをそのまま吐き出します。
TypescriptやWebpackで処理を追加するルートもありますがこれらを使用しなければいけないほどのボリュームがあるのなら他の構成が良いと思うので今回は簡易な処理のみにします。
手順
Linuxツールを開いてプロジェクトディレクトリを作成
mkdir project_name
cd project_namenpmで各パッケージをインストールする
npm init -y
npm i -D nunjucks-cli stylusnunjucksとstylusをインストールします。
他にもタスク処理に便利なパッケージをインストールします。
npm i -D npm-run-all rimraf chokidar-cli cpx browser-sync各パッケージの簡単な説明です
- [npm-run-all] npm-script内で並列処理、直列処理を設定できる
- [rimraf] 指定したディレクトリを削除することができる
- [chokidar-cli] 指定したディレクト内のファイルが変更されたら処理を発動することができる
- [cpx] 指定したファイルを簡単に複製することができる
- [browser-sync] 生成されたWEBページを確認できる。更新時に自動リロードされる
各ディレクトリ、ファイルを用意する
mkdir -p src/{tpl,stylus,js}
touch src/tpl/index.njk
touch src/stylus/style.styl
touch src/js/script.js最初の段階は各1ファイルずつの構成で進めます。
package.jsonにタスク処理を記入する
npm init -y コマンドで生成されたpackage.jsonにscriptsという項目がありますがここがタスク処理を記入する場所です。
このscriptsに以下の行を追加していきます
"clean": "rimraf dist"distフォルダを削除します。コマンド名通り生成したものを一旦クリーンにします。
"build:html": "nunjucks /**/*.njk -p src/tpl -o dist"nunjucks-cliを使用してsrc/tplの中にある拡張子njkのファイルをHTML化しdistフォルダに吐き出します。
"build:stylus": "stylus src/stylus/style.styl -o dist/css/style.css"stylusを使用してstylus/style.stylファイルをdist/css/style.cssとして吐き出します。
"build:js": "cpx \"src/js/**/*.js\" dist/js/"cpxを使用してsrc/jsフォルダ内にある拡張子jsのファイルをdist/jsフォルダにコピーします。
"build": "run-s build:html build:stylus build:js"npm-run-allのrun-sコマンドを使用して今まで設定した生成用コマンドを順番に処理していきます。
※並列に処理をおこなうrun-pというコマンドもありますが並列に処理するとディレクトリ作成処理で躓くこともあるので直列処理の方がエラー回避できます。
jsonファイルなので行末にはかならずカンマ（,）を記入してください。これを忘れると動きません。
ここまででdistフォルダ内にindex.html、css/style.css、js/script.jsが吐き出されるようになりました。
次は各ファイルの変更を監視できるように設定していきます。
次回につづく
