npm + gulp + webpack でつくるES6/sass開発環境

この記事には新しいURLが設定されています

最近はJavaScriptをES6で書いたり、cssをsassで書いたりするのが当たり前になってきました。そうなると必然的に必要になるのがビルド。ビルドの仕組みも充実してきていて、単にトランスパイルするだけでなく、構文チェックしたり圧縮したり、CSSスプライトをつくるようなことまでできたりします。

で、このビルド環境、新規Project立ち上げる度に用意するのが面倒くさいので、自分用の雛形をつくりました。よかったら参考にしてみてください。

雛形なので特別なことはしません。新しく何かつくりたいと思ったときにすぐに作れるようなビルド環境を用意するだけです。デバッグ用にトランスパイルしただけのものと、リリース用に結合して圧縮したものの両方をつくれるようにします。

基本的に使うツールは何でもいいのですが(依存したくないので)…ひとつだけこだわりポイントがあります。それはnpmさえインストールされていれば動く ものであること。理由は2つ。

仕事用PCとプライベート用PCのそれぞれに入っているツールの種類やバージョンが違ったり、共同開発者たちのPCのツールでそれらが違ったりと、PCの状態はPCの数だけ異なります。

そんな状況ではツールのバージョンによって動作が変わりかねないし、二重にインストールさせてバージョンぐちゃぐちゃとかバージョンが競合して動かなくなったとか、何かしらが起きる可能性があるのです。ハラハラ😱なのです。

つまるところ、人のグローバルを侵すな という話です。

というわけで、ビルドコマンドはpackage.jsonに集約して、すべてnpmコマンドで動くようにしました。

中身を全部確認したい場合は【aloerina01/short-code - GitHub】へ。
ここではポイントとなる部分を抜粋紹介します。

package.jsonのscripts部分抜粋です。gulpコマンドをnpmコマンド経由で呼び出せるようにしています。scriptsのコマンドは全部$ npm run XXXというかたちで実行できます(例外あり)。

$ npm run build

npmがnode_modules以下にあるモジュールについてのパス解決をしてくれているので、gulp-cliをグローバルインストールしていなくてもgulpコマンドを実行できるのです。同様にwebpackのコマンドなんかも実行できます。

そしてこれがが実際に動作するタスクの中身。gulp-plumberでエラーハンドリングをした上で、①lint、②Webpackでのトランスパイル、③distディレクトリに書き出し、をしています。

それをwatchさせた上で、defaultコマンドに登録しています。よくある基本的なかたちです。

自分の開発環境の雛形をつくっておくと、新しいものを作りたいと思ったときにすぐに行動に移せていいですね。雛形はできるだけシンプルなものにしてあるので拡張もしやすく、クローンしてコマンド2つ叩けばすぐに開発環境が整います。よければ是非使ってみてください。

$ npm install
$ npm run build