gulp-sprockets、あるいはRailsのAssetsのビルドについて
- 2. はじめまして • @yo_waka • Software Engineer @ freee • 会計サービスの開発 • 普段はRuby, JavaScriptを書いてます
- 3. We are using Rails!
- 4. Are you using Sprockets?
- 5. Sprockets • アセットファイルの連結・圧縮 • manifest.jsonによるブラウザキャッシュを考慮したパ ス管理 • CoffeeScript, SCSSのコンパイル • Railsではsprockets-rails経由でRailsとSprocketsを繋ぐ ことでAssets Pipelineをよしなにやってくれる
- 6. Sprocketsとの蜜月 • application.js.coffeeにCoffeeScript書くと自動でJSにコンパイルされて読み 込まれる！ 分割しても「//= require form」と書くだけで結合してくれる！ • application.css.scssにSass書くと自動でCSSにコンパイルされて読み込まれ る！ 分割しても「/**= require form」と書くだけで結合してくれる！ • XXX-railsなフロントエンドのgem、追加するだけで使える！ • サービスの規模も小さく、フロントエンドに明るいエンジニアがいない時代 はとにかく便利
- 7. しんどい事案が増える • とあるxxx-railsなフロントエンド系gemが全然本体をバージョン アップしてくれない • フロントエンドgemとbower（bower-rails）の混在 => このライブラリ、本体はどこにあるねん • とあるSCSSファイルのコンパイルだけで1時間かかるようになって しまった • フロントだけビルドしてCDNにデプロイ、とかやろうとしてもRails が必要
- 8. 進化についていく • ES2015で書いていくぞ • React&JSXで書いていくぞ • 共通コンポーネントはnpmパッケージ化 • 共通スタイルはnpmパッケージ化 • やっていくぞという人たちが増えてアセットのビルドプロ セスを改善する機運が高まった
- 9. 移行しよう • Node.js側（gulp+webpack）に移行が進む コードベースが巨大なので少しずつ移行させる • とあるxxx-railsなフロントエンド系gemが全然バージョンアップし てくれない => npmパッケージから利用 • とあるSCSSファイルのコンパイルだけで1時間かかるようになっ てしまった => libsassだと3分。ruby-sassからnode-sassへ
- 10. npm+sprockets • browserify, gulp, webpackなどでビルド => app/assetsに成果物を吐く => 後は通常のSprocketsのassets pipeline（=rake assets:precompile） で • これはこれでしんどい • gulp, Sprockets両方でやってること知らないとビルド周りでおかしく なったときに対処しづらい（ビルドしたものをビルドし直すのもおか しい気もする） => libsassとruby-sassのバージョン違いによるエラーなど
- 11. 移行期の辛み • application.jsから画面ごとにJSを切り出して ES2015化 => ES2015化したJSファイルをstubしないと application.jsがビルドエラー • application.jsとES2015化したJS両方から呼び 出すコンポーネントのビルドがめんどい
- 12. gulp-sprockets • https://github.com/waka/gulp-sprockets • SprocketsがやってくれることをGulpストリームのみで実 現する（したい）ためのGulpプラグイン • npm run buildのみでRailsのassetsをビルドすることを目 指している • 使い方等はREADMEやsample下のgulpfileをご覧ください
- 13. gulp-sprockets • 既存のRailsのassetsのビルドプロセスをnpmに完全に置き換えるための移行中 のビルドを支えるのが目的 • なので、現状requireディレクティブの挙動は合わせている（単純に指定された パスのファイルをconcat） • manifest.jsonもgulpのビルドタスクで簡単に管理できる（削除 => 再作成） => manifest.json重複問題の恐怖から逃れられる • manifest.jsonに書き出すストリームを分けているので、その機能だけを使うこ ともできる => Babelのみでビルドが完結するファイルはmanifest.jsonにだけ書き出す
- 14. 中でやってること • Esprima, PostCSSでコメント部をパースしてSprocketsディレクティブ （require, require_tree, stub, etc）を解釈 => CoffeeScriptの複数行コメントによるディレクティブのパースは非 対応です・・ • CoffeeScript, SCSSのコンパイル • asset_pathやimage_urlなどRailsヘルパ関数の組み込み（node-sassの カスタム関数として） • manifest.jsonの生成