読者です 読者をやめる 読者になる 読者になる

青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

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

// JavaScript // WEB開発の話

f:id:cocoro27:20161025201707j:plain

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

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



ビルドの中身

  • ES6 → ブラウザで動かせるJavaScript
  • scss → css
  • jsとcssはそれぞれ結合して圧縮する(.min.js/.min.cssをつくる)
  • 変更を検知して自動ビルドする

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



たったひとつのこだわり

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

  1. npmは今後もしばらく廃れないだろうという安易な予想😉
  2. 余計なものをグローバルインストールさせないという無駄な優しさ❤

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

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

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

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

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



ソース

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

package.json

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

$ npm run build

こんな感じ。


gulpfile.js

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

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



おわりに

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

npm install
npm run build
TOP