2017-02-02

Npm-Run-All で複数の npm-scripts を実行・OS 環境に関わらず rm -rf する

前回の記事で、npm-scripts を使った CSS の圧縮処理を紹介した。

Gulp を使わずに npm-scripts を使う・npm-scripts から Clean-CSS-CLI を呼んで CSS を圧縮する

今回は、この npm-scripts をさらに便利なものにするパッケージを2つ紹介する。

複数のタスクを一括実行したい

そもそもぼくが今回 npm-scripts で CSS を圧縮したいのは、ぼくが運営しているはてなブログのカスタムテーマを圧縮するためだった。

ぼくは3つのはてブロを運営しているので、圧縮したい CSS ファイルは3つある。

今のところ、3つのブログでデザインはそれぞれ違えど、不具合を修正するときは3つとも同時に直している。つまり、3ファイルの CSS 圧縮を一括してやりたいことが多いのだ。

そこで登場するのが npm-run-all というパッケージ。これを使うと複数のタスクを一括して呼び出せるようになる。

# npm-run-all をローカルインストール
$ npm install -D npm-run-all

package.json には以下のようにタスクを記述。

"scripts": {
  "min": "npm-run-all min:*",
  "min:corredor": "cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/css/Corredor.min.css src/css/Corredor.css",
  "min:murga": "cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/css/Murga.min.css src/css/Murga.css",
  "min:elmylar": "cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/css/ElMylar.min.css src/css/ElMylar.css"
}

「min:corredor」「min:murga」「min:elmylar」は、いずれも1ファイルずつ Clean-CSS-CLI で CSS を圧縮するタスク。そしてこの3つのタスクを一括呼び出すのが「min」タスクになる。

「min」タスクは npm-run-all の機能で、アスタリスクによるパターンマッチ指定をしている。これで「min:」から始まるタスク全てを呼べるのである。

# 「min:corredor」「min:murga」「min:elmylar」タスクを一括実行する
$ npm run min

dist ディレクトリ配下を削除しておきたい

結果ファイルを出力する dist/css/ ディレクトリ配下を一旦まっさらにしてから Clean-CSS を実行した方が、何となく気分が良いだろう。

だが、npm-scripts に実行 OS に依存するようなコマンドを書いてしまうと、Windows でしか実行できないとか、Windows では実行できないとかいう問題が起こったりする。

ディレクトリ内のファイル全削除のコマンドは、Windows では rd /s、Mac OSX や Linux では rm -rf とコマンドや動作が異なる。

参考 : ［rd・rmdir / rmdir・rm -rf ］ディレクトリを削除 | 日経 xTECH（クロステック）

そこで、クロスプラットフォームで rm -rf を実現できる npm パッケージである rimraf を使ってやる。

# rimraf をローカルインストール
$ npm install -D rimraf

package.json を先程の例から以下のように変更する。

"scripts": {
  "clean": "rimraf ./dist/css/*",
  "min": "npm-run-all clean min:*",
  "min:corredor": "cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/css/Corredor.min.css src/css/Corredor.css",
  "min:murga": "cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/css/Murga.min.css src/css/Murga.css",
  "min:elmylar": "cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/css/ElMylar.min.css src/css/ElMylar.css"
}

追加した clean タスクで rimraf を使っており、これが ./dist/css/ 配下のファイル・ディレクトリを全て削除している (ゴミ箱ではなく削除)。rimraf は対象のディレクトリが存在しなくても失敗にはならない。

また、min タスクにも clean タスクを呼び出すよう追加してある。これで、結果ディレクトリのお掃除と再ビルドが1つのコマンドでできるようになった。

# clean タスクを呼んだあと、各種 min: タスクを一括実行する
$ npm run min

はてなブログのカスタムテーマは GitHub 管理しています

このようにして作成した開発環境、および本ブログを始めとするはてブロのカスタムテーマ CSS は、以下の GitHub リポジトリで管理している。

GitHub - Neos21/HatenaBlogs: はてなブログのテーマやカスタム HTML などを保存しておくリポジトリ。

圧縮した CSS ファイルをそのまま外部ファイルとして読み込むことはせず、「デザイン設定」画面から「カスタム CSS」として都度コピペしてインラインにぶち込むようにしているので、CSS の製作中は Watch したりする必要がなく、書き終わってから一度 npm run してやればよかったので、このような構成になっている。

blog.css のスタイルをカスケードして、人力でも最小限のスタイルしていになるよう書いてきたが、コメントや改行を減らすだけで半分くらいのサイズになるので、CSS の Minify も侮れん。