gulpfileを書いたメモ
概要
gulpで.cjsxを.jsにして、browserifyして、ミニファイして、sourcemapを書きだすのを、ファイルを監視して差分ビルドするgulpfile.coffeeを書いた。
gulpfile.coffeeを書くのに色々と苦労したので書き残しておきたかった。
コードはココ
CoffeeScript
最近、Electronに興味を持ち、Node.jsにさぐりさぐり触ってみていた。
Node.jsついて調べていてよく目につくのが、AltJSの話。そこで、CoffeeScriptの素晴らしさに気づいた。
CoffeeScriptはかなりRubyに影響されているところがあり、馴染みやすいところが多い。しかし、馴染みにくいところもある。やはりインデントを利用した記法は抵抗が大きかった。
記法に関しては分かるのだが、インデントがあっていなかったり、逆に改行するとレシーバが浮いていたり、callbackの引数があるため()を付ける部分を統一できなかったりで、いろいろ気になるところが多くてなかなか慣れない。
Ruby的な開けたら閉じるという精神があるとこのへんモヤモヤするのは性なのでしょう。
Improve chaining syntax · Issue #1495 · jashkenas_coffeescript
Gulp
CoffeeScriptはJavaScriptにコンパイルする必要があるが、そこでコンパイルなどの作業のタスク管理をしてくれるのがGulp。Scss、CoffeeScript、などのそれぞれのビルドタスクを設定、ソースマップの生成、ファイルの変更を監視しコンパイルを行うなど、プラグインを利用し、ビルドタスクの管理を行う事ができる。
Gulpと同様なタスクランナーとして他にGruntがある。Gruntについてはあまり調べていないため、これ以上言及しないが、Gruntは開発が止まっているとのことで、私はGulpを選択した。
Gulpはタスクをgulpfile.jsに記述する。そして、この記述方法がStreamというものを利用しているのだが、これもまた慣れないものである。ストリームについては下の記事にいろいろ書いてある。
gulpfileを書く
gulpはgulpfile.jsをデフォルトで読み込むが、--require coffee-scriptをつけることでgulpfile.coffeeを読み込んでくれる。
alias gulp='gulp --require coffee-script'としておくと捗る。
今回やることは概要にも書いたとおりなのだが、以下にnpmパッケージと対応させて表にしてみた。
| npm | 用途 |
|---|---|
| gulp | Gulp自体 |
| gulp-plumber | コンパイルに失敗したときにgulpが終了しないようにする |
| gulp-coffee | CoffeeScriptのコンパイルを行う |
| gulp-cjsx | CoffeeScriptにjsxなシンタックスを記述できるようにした.csjxファイルを.jsに変換する |
| gulp-watchify | ファイルの変更を監視して差分をビルドする |
| gulp-rename | 出力されるファイル名を変更する |
| gulp-uglify | .jsファイルの圧縮(ミニファイ)を行う |
| gulp-sourcemaps | ソースマップの生成を行う |
| vinyl-buffer | Stream化を行う |
これらを用いて書いたgulpfileが以下である。
scssなど他のファイルのビルドタスクを増やす時はbuild:scssとタスクを書きwatchに追加すれば良い。
ReactとCoffeeScript
VirtualDOMを利用したViewコンポネントの構成を行うライブラリとしてReact最近話題になっている。
ReactはDOMオブジェクトを生成する際に独特のシンタックスとしてjsxというものが存在する。jsxを使わないでjsのみで書くこともできるのだが、冗長な記法故にjsxが用いられることが多い。
また、他にReactDOMオブジェクトに変換可能なテンプレートを提供するライブラリ(react-jadeなど)も存在する。
今回はそのjsxをCoffeeScript内に記述できるシンタックスを提供するcjsxを利用した。
上のnpmパッケージリストにも書いたが、cjsxの変換にgulp-coffee-react-transformを利用した。cjsxを変換するライブラリは複数存在し、今回はgulpStreamとして記述できるものを選択した。しかし、gulp-coffee-react-transformはブラックリストに含まれている。
同様のライブラリとしてgulp-cjsxが存在し、こちらはブラックリストに含まれていないため、こっちの方が良いかもしれない。
gulp-coffee-react-transformとgulp-cjsxの違いは前者は.cjsxから.coffeeに変換し、後者は直接jsに変換する。
gulp-coffee-react-transformは正常に動作していないため、gulp-cjsxを利用する。
で
とりあえずgulpfile.coffeeは一旦出来上がった。
なかなか分からない事が多く、一日中gulpfileをいじっていたように思う。
機能を増やしていって自分用にカスタマイズしていく感じがエディタを弄ってる気分になれてなんかハマる。
browserifyのところはまだ改良が必要だと思う。なにか良い書き方があったら教えてください。
でで
ReactとFluxとElectronでかつて作ってたTwitterクライアントのLumillyを再設計してみようかなと思っている。
Fluxがなかなか理解が追い付いていなくて、整理できたらこれについても記事を書こうかなと思う。
参考にした記事
blog comments powered by Disqus