Gulp を使わずに npm-scripts を使う・npm-scripts から Clean-CSS-CLI を呼んで CSS を圧縮する
前回の記事で、clean-css-cli というコマンドラインツールを使って CSS を圧縮するコマンドを書いた。
今回は、npm run で任意のワンライナーを実行できる、いわゆる npm-scripts を使って、Clean-CSS-CLI を呼び出して CSS を圧縮させてみようと思う。
npm-scripts とは
npm-scripts とは、package.json に任意のコマンドをワンライナーで書いておくと、それを npm run で呼べるようになる、というもの。
早速、前回の記事で作ったコマンドを例に、実際に動作するコードを書いてしまおう。その方が分かりやすい。
package.json の中に以下のようにコマンドを書いておくとする。"scripts" という名前部分は npm init で package.json を生成した時からあるはずで、今回付け足したのは "minify" の行、ということになる。
"scripts": {
"minify": "cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/Theme.min.css src/Theme.css"
}
で、この package.json があるフォルダ上で以下のようにコマンドを叩くことで、package.json に書いておいた cleancss コマンドが実行されるというものだ。
$ npm run minify
このように、npm run (package.json に定義した名前) で、長ったらしいコマンドもサクッと呼び出せる。&& で複数のコマンドを繋げたりもできるので、ワンライナーでもそれなりに複雑なことができてしまう。
Gulp は要らない子？
別ブログで以下のような記事を書いたが、これまでの「Grunt / Gulp でゴリゴリビルドスクリプトを書いていこうぜ」という流れは「ゴリゴリ書くの大変だし依存するプラグイン多過ぎて大変だわ…」という疲弊をもたらし、段々と「あれ、npm 標準の npm-scripts でワンライナーをいくつか書いておけば Gulp と同じことできるじゃん？これでいいじゃん？」という風潮に変わってきている。
Gulp で制御すれば、より複雑な処理を JavaScript で記述できるので、慣れている人は良いのだが、「そこまで複雑なことをしない時も色々なプラグインに頼ってしまい大変」という人は、package.json に予め使用するコマンドを定義しておき、npm run で呼び出す方がシンプルに済む。
npm-scripts はローカルインストールしたパッケージをコマンドで呼べる
シェル上で npm パッケージをコマンド実行したいときは、対象のパッケージをグローバルインストールしておかないと呼び出せない。それこそ、Gulp が良い例であろう。
# ローカルインストールしても…
$ npm install gulp
# このように「gulp コマンド」としては呼び出せない
$ gulp watch
# コマンドとして使えるようにする = パスを通すにはグローバルインストールしないといけない
$ npm install -g gulp
だが、package.json に書いた npm-scripts で使用するコマンドの場合、グローバルインストールされていなくてもよく、対象のコマンドとなるパッケージがローカルインストールされていれば使用できるのだ。
これはグローバルインストールするパッケージを増やさなくて良くなるし、ローカルにインストールする必要のあるパッケージは --save-dev で package.json に書いておけば良いので、package.json だけ見れば全てが分かるようにできるのである。
npm i -D rollup
とすると、当然ながらコマンドラインからrollupをたたくことはできません。npm i -g rollup
というようにグローバルインストールする必要があります。ですが、これを強要するのは環境破壊につながるので、あまりよろしくありません。
しかしなんと、ローカルインストールしたライブラリのCLIは、npm scriptsからは叩けるのです。
…
ということで、Gulp を使うことなく、npm-scripts (npm run) から Clean-CSS-CLI を呼び、CSS を圧縮することができた。
次回はこの npm-scripts をさらに便利にしていく。