readモチベーションReactのJSXの手動ビルドを自動でしたい背景Reactを使う場合JSXをJSに変換する必要があるのだがこれには2つの方法が有る。1つはhtmlの<script>タグ内にJSXを書きJSXTransformerでJSに変換する方法、もう一つは事前にJSXをビルドする方法である。前者は、自分でJSXをビルドをする必要はないが、html内の<script>タグ内に全てJSXを書く必要が有るため、JSXファイルを分割出来ない。JSXからJSへの変換が都度発生するためパフォーマンスの低下につながり現実的ではない。一方で、後者はファイルを分割できるため非常に便利だが、変更があるたびに自前でビルドする必要がある。僕は現状、都度手動でビルドを実行しているためとても面倒くさい。今回は煩わしさから解放されるべく手動で行っている部分を自動化するためにgulpのタスクを書いてみたいと思った次第である。JSXの自動ビルドに必要なnodeパッケージ大きく分けて以下の4つのnodeパッケージを使って自動ビルドを実現する。gulp:Node.jsのStreamAPIを利用したビルドツール。moduleの追加を行うBrowserify:クライアントサイドのjavascriptでモジュール管理を実現するツール。これでbundleされたファイルはrequreで呼びだせるwatchify:ファイルの差分を監視し、差分のみbrowserifyでビルドするツール。GitHubによると、規約違反でブラックリストに入っているとのことなので使わないことにした。gulpとvinyl環境を構築する前にgulpのタスクを理解する。タスクは、ざっくり言うと以下のような流れです。