npm-scriptsでビルド環境を作る

Kou
Kou
Jul 23, 2017 · 4 min read

タスクランナーといえば近年 gulp が非常に人気が高く、利用者も未だに多いことかと思います。
しかし、バージョン4が何年経ってもリリースされない現状を垣間見ると、これ以上 gulp に依存するのは今後新しいアーキテクチャが出てきた際に追従できない可能性が出てきます。そこで、完全に gulp をやめてしまおうというのが今回の趣旨です。

しかし、gulpを無くしてしまった場合、今までのビルドしていたものはどうやってビルドするの?となるかと思います。
これは非常に単純な話で、例えば pug や babel にはビルドするための専用のCLIツールが配布されています。gulpのプラグインも実はこれを呼び出しているに過ぎないので、自作することは簡単なのです。

gulpに代わるものを作るためには

具体的にどのように実現するのかについては、npm-scriptsの機能を使って実現します。その上で、最低限必要だと思われる以下の必要なライブラリを紹介します。

npm-run-all
複数のタスクを並列実行することが出来ます。例えば「watch:pug」と「watch:postcss」というnpm-scriptsが定義されていた場合、「npm-run-all -p watch:*」と記述すると該当するタスクを一度に並列実行できます。(個々に指定してもOK)

chokidar
ファイル監視(watch)を実現するために使用します。
ファイルの追加or変更時にビルド処理を呼び出すことができます。

glob
言わずと知れた glob パターンでファイルの複数指定を行う場合に使用します。(例: *.css といった記述が可能)
大抵の場合、CLIツールもglobパターンの指定をサポートしているので、直接利用する必要がある場合とそうでない場合があります。

chalk
コンソール文字列に簡単に色をつけることができます。

node-notifier
エラーが出た際に通知を表示するのに利用します。

nodemon
タスクを記述したJavaScriptが更新された際にプロセスを立ち上げ直してくれます。ファイル監視タスクにおいて、nodeコマンドの代わりに利用します。

path
ファイルパスの操作を簡単に行えます。

fs-extra
fsの拡張版。例えば ファイル書き込み時に存在しないディレクトリを自動で作成してくれたりなど、地味に便利になった fs です。

タスクを実行&ファイル監視するための便利関数を作る

説明ばかりではイメージがつきにくいかと思うので、
普段私が利用しているタスクを実行したりファイル監視をするための便利関数群を紹介します。

各関数について簡単に説明すると

exec
コマンドを実行するための関数

watch
指定されたディレクトリまたはglobパターンで指定されたファイルを監視する関数

・watchBuilding
監視対象と実行コマンドを同時に指定することで、ファイル監視イベントが発生するごとに指定されたビルドコマンドを実行する関数 (基本これだけで完結できます)

タスクを作ってみる

それでは、試しに pug をビルドするタスクを作ってみます。
プロジェクト内に node_scripts/tasks/pug.js というファイルを用意し、上記の便利関数を定義したファイル (node_scripts/utils/functions.js とする) を合わせて利用して作成します。pugのcliを利用するために、「pug」と「pug-cli」を npm install もしくは yarn add しておきましょう。

たったこれだけのコードでタスクの作成は完了です。
あとは npm-scripts として package.json に以下のように記述すればビルドタスクと監視タスクの両方を1つのスクリプトで実現できます。

"scripts": {
"build:pug": "node ./node_scripts/tasks/pug.js",
"watch:pug": "cross-env NODE_WATCH=true nodemon ./node_scripts/tasks/pug.js"
}

まとめ

以上で、gulpをやめてnpm-scriptsへ移行する方法を紹介しました。
便利関数さえ作ってしまえば gulp よりも完結に記述でき、かつオリジナルのCLIツールを呼び出してビルドが可能なので、gulpやそのプラグインの不具合に引っ張られることはありません。
PostCSSやwebpackについても同等の方法で簡単にタスクを作成できますので、興味がある方は是非試してみてください。

Kou

Written by

Kou

猫好きモバイルアプリケーション開発者記録。WebアプリのFrontend/Backend/インフラとモバイルアプリ(Android/iOSアプリ)作成を行っているエンジニアです。なんでもやってます。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade