この記事は、Tech KAYAC Advent Calendar 2016 の22日目の記事です。
こんにちは！カヤックのクライアントワークチーム・フロントエンドエンジニアの@takumifukasawa です。
昨年のアドベントカレンダーではWebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番という記事を書かせていただきました。
もくじ
- はじめに
- 手順
- npm scriptsとは
- gulpと比較したメリット・デメリット
- サンプルの開発環境
- 明日は
はじめに
今年の夏頃、いつも通りgulpを使っていた僕は、ある日gulpのバージョンアップか何かをしたら自作のgulp開発環境が上手く使えなくなって、すごくハマりました。それはそれは深刻な事態に…。
その時にふと、「あれ、なんでgulp使ってるんだっけ…」と立ち返り、gulpをなくしてみたらどうなるんだろうとあれこれ手を動かしてみました。すると、開発環境が驚くほどすっきりして、しかも、環境を一からあれこれ試行錯誤で作ってみるのが楽しくなりました。
というわけで、gulpやgruntなどのタスクランナーを使わず、npm-scriptsを主軸とした今っぽいフロントエンドの開発環境を作ってみたいと思います。脱タスクランナーです。
npm-scriptsを活用した開発環境自体は1,2年くらい前から一つの流れになっていますが、せっかくなので、今っぽいモジュールを使った環境もご紹介できればと思います。
早速ですが、そんな開発環境の雛形を作ってみました。最後に解説をします。
手順
注）node.jsはインストール済の環境です
この順番が基本となります。最近facebook製の新しいパッケージマネージャーの yarn が登場しましたが、コマンド以外はyarnでもnpmでも特に変わりません。
1. $ yarn init （$ npm init） 2. $ yarn add module名 （$ npm install module名） 3. package.jsonのscriptsを編集 4. 2,3を繰り返す
こうしてみると、作業順番はとてもシンプルです。initやインストール部分も馴染み深いと思います。 それではいよいよ、npm-scriptsを使っていきます。
npm scirptsとは
npmはpackage.json内の「scripts」というフィールドにシェルスクリプトやエイリアスコマンドを登録することができます。
書いてみる
まず、package.jsonにscriptsのフィールドを作ります。あとは、"script名": "実行コマンド"をペアとしてどんどん追加していくだけです。まず、3つscriptsを書いてみました。
↓↓ 以降、こちらのsciprtsを元に解説していきたいと思います。
...
"author": "takumifukasawa",
"license": "MIT",
"scripts": {
"start": "npm run watchify & npm run serve",
"serve": "browser-sync start --server ./public/",
"watchify": "watchify ./src/js/app.js -o ./public/js/bundle.js -v wait;"
},
...
実行してみる
npm-sciprtsは $ npm run scripts名 でscirptを実行できます。 登録した watchifyであれば、$ npm run watchify でscriptが実行されます。
予約語
ここで注意したいのは、npm-scriptsには予約語が4つあることです。それらはrunをつけずに実行できます。
$ npm start $ npm restart $ npm stop $ npm test
そのため、先ほど登録した3つのnpm-scriptsはこのコマンドでそれぞれ実行できます。
$ npm start $ npm run serve $ npm run watchify
実行順序
scriptsは&や&&を用いて実行順序を指定することができます。先ほどのscriptsのstartでは&を使ってscriptを繋げています。
&を1つで繋げるとそれぞれのscriptを並列に実行&&で繋げると直列に実行。scriptに実行順が必要な場合は&&が便利です。
例中のstartはnpm run watchify & npm run serveと記入したので、watchifyとserveを同時に実行する指令となります。
※ npm-scripts自体の詳細な使い方は、参考文献とさせていただいたこちらの記事がとてもわかりやすいです。環境変数を設定することもできます。興味のある方は是非ご一読いただければと思います。 How to Use npm as a Build Tool
gulpと比較したメリット・デメリット
メリット
- タスクランナーを介さないので、豊富なnode_modulesを直接叩ける
- gulpやgruntなどのタスクランナー自体を学習するコストがいらない
- 必要最低限のnode_modulesだけ使えば良いので、プロジェクトの容量を押さえられる
タスクランナーを使う場合、そのタスクランナー用のnode_modulesの開発が止まったり、タスクランナーのバージョンが上がるなどの影響で動かなくなることがあり、詰まった経験をした方は多いんじゃないかと思います。
なので、npm-scriptsから直接実行することの大きなメリットは1番だと思います。npmのドキュメントを直接見れば大抵の場合こと足ります。例えば先ほどのwatchifyであれば、こちらのドキュメントを読めばOKです。
デメリット
- package.jsonが肥大化する
- 使える変数が限られているなど、柔軟性・拡張性が低い
- 可読性はタスクランナーに劣る
package.jsonにタスクが集約してしまう分、複雑なことはあまり向きません。 同時に実行するタスクの数が多かったり、実行したいタスクの順番を厳密に決めたい時は、gulpなどタスクランナーを使った方が管理しやすいです。
サンプルの開発環境
最後に、最初ご紹介した自作のnpm-scriptsで書いた開発環境について解説して終わりたいと思います。開発環境を作る際や、この記事のご参考になればと思います。
モジュールは今っぽいものを組み合わせています。シングルページを想定したかなりミニマムな構成なので、複数html,js,cssを作りたいときは、適宜修正しています。
構成
html: pug（旧jade）
インデント形式でhtmlを記述できます。閉じタグを書かなくて良いので楽です。
css: postcss
autoprefixerやpostcss-assetsなど、使いたい分だけ適宜モジュールをインストールして使うpostcss。環境によってモジュールの組み合わせを変えることができるので、開発のスケールを自由に変えられます。
javascript: watchify
browserifyの差分ビルドを実現してくれます。browserifyをそのまま使うと更新のたびに1からコンパイルしてしまうのですが、差分ビルドにすることで、コンパイル速度が劇的に上がります。
serve: browser-sync
開発サーバーです。ファイルが更新された時に自動でリロードしてくれるautoreload機能が便利です。
明日は
今年新卒で入社してくれて超大活躍している @beinto くんのすごい記事です！
[参考文献]
