中を流れてきたファイルを保存します。中を流れるのは、ファイル一個に対応するオブジェクトだということです。言うと、ファイルのパスとファイルの中身の情報を持っています。この時重要なのはgulpのpipeに渡すオブジェクトはvinylでなくてはならないということです。nodeパッケージをインストールするそれでは、自動ビルド環境を構築していこう。nodeパッケージのインストールをnpmを使って行う。initを実行してpackage.jsonを作成する。installを実行するだけで同じバージョンのパッケージを別環境でもインストールできるようになる。続いて、パッケージをインストールする。--save-devgulpのようにコマンドラインから利用するパッケージは-gオプションをつけてインストールする。ファイル内からrequireで参照するものについては-gオプションは必要ない。インストールしたパッケージの情報を追加できるので必須。reactify”のように省略できる。gulpfileの作成gulpfile.jsを作成して自動ビルドタスクの定義を行う。このサンプルが参考になる。作成したgulpfile.jsは以下の通り。bundler以降はbundler.bundle()->pipe()->pipe()->pipe()と一連のストリーム処理となっており、ENTRY_POINTからbrowserifyに読み込んだファイル群を1つのbundleにしてsource()、gulp.dest()指定するファイル名、ディレクトリ名に出力する。この時、bundle()の結果はvinylオブジェクトではないためgulpに渡すことができない。そこで、vinyl-source-streamを利用してvinylオブジェクトに変換している。bundle())を実行した時はbundler.budnle()を実行する。bundle)で更新分のみビルドするためにbundle()が走る。(bundle()を使うが、bundleとすることに注意)自動ビルドしてみる作成したgulpタスクを実行するためにサンプルファイルを以下の構成で用意した。);続いて、gulpfileに定義したタスクを実行して自動的にビルドされるか確認する。ms初回実行時はsrc配下の全てのjsxファイルをビルドし、build.jsを作っている。msのメッセージが表示されるためビルドが自動的に走っていることが確認出来た。msとビルドに要した時間が短縮されていることから差分のみをビルドしていることも確認できる。エラー発生時にwatchifyを止めない設定をするここまでJSXの自動ビルドはできるようになったが、エラー発生時にgulpタスクが停止してしまう問題が残っている。エラーが発生するたびにgulpタスクを実行するのは非常に面倒だ。これには、gulp-utilパッケージを使って対処する。具体的には以下の様なコードを追記する。.pipe(gulp.dest(path.DEST_BUILD));}ちなみに、gulpのタスクのエラーハンドリングをgulp-plumberというパッケージを使っている例がネット上にあるが、watchify、browserifyはエラーが発生するとストリームにvinylオブジェクト以外のオブジェクトを返すためpipe処理出来ない。.pipe(gulp.dest(path.DEST_BUILD));}のようにすると以下の様なエラーが出て、gulpのタスクが停止する。以下のようにした方がエラー時に余計なログが出ないことが分かったのでこちらの方をおすすめする。watchifyで実現した。gulpの理解に少し時間がかかってしまったたが、今まで手動でビルドしていた部分が自動化されたためコーディングに集中できるようになった。gulpはフロントエンドのビルドシステムとして他にも色々な使い方ができそうなの継続して使って見ようと思う。gulpを使ったことがない人は参考に挙げているリンクで基本的な文法を勉強すると良い。ついて調べてみました。