Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
gulp-sprockets,
あるいはRailsのAssets
のビルドについて
2016/02/09 Node学園 19限目
@yo_waka
はじめまして
• @yo_waka
• Software Engineer @ freee
• 会計サービスの開発
• 普段はRuby, JavaScriptを書いてます
We are using Rails!
Are you using Sprockets?
Sprockets
• アセットファイルの連結・圧縮
• manifest.jsonによるブラウザキャッシュを考慮したパ
ス管理
• CoffeeScript, SCSSのコンパイル
• Railsではsprockets-rails経由でRai...
Sprocketsとの蜜月
• application.js.coffeeにCoffeeScript書くと自動でJSにコンパイルされて読み
込まれる!

分割しても「//= require form」と書くだけで結合してくれる!
• appli...
しんどい事案が増える
• とあるxxx-railsなフロントエンド系gemが全然本体をバージョン
アップしてくれない
• フロントエンドgemとbower(bower-rails)の混在

=> このライブラリ、本体はどこにあるねん
• とある...
進化についていく
• ES2015で書いていくぞ
• React&JSXで書いていくぞ
• 共通コンポーネントはnpmパッケージ化
• 共通スタイルはnpmパッケージ化
• やっていくぞという人たちが増えてアセットのビルドプロ
セスを改善する機...
移行しよう
• Node.js側(gulp+webpack)に移行が進む

 コードベースが巨大なので少しずつ移行させる
• とあるxxx-railsなフロントエンド系gemが全然バージョンアップし
てくれない

=> npmパッケージから利用...
npm+sprockets
• browserify, gulp, webpackなどでビルド

=> app/assetsに成果物を吐く

=> 後は通常のSprocketsのassets pipeline(=rake assets:prec...
移行期の辛み
• application.jsから画面ごとにJSを切り出して
ES2015化

=> ES2015化したJSファイルをstubしないと
application.jsがビルドエラー
• application.jsとES2015化...
gulp-sprockets
• https://github.com/waka/gulp-sprockets
• SprocketsがやってくれることをGulpストリームのみで実
現する(したい)ためのGulpプラグイン
• npm run ...
gulp-sprockets
• 既存のRailsのassetsのビルドプロセスをnpmに完全に置き換えるための移行中
のビルドを支えるのが目的
• なので、現状requireディレクティブの挙動は合わせている(単純に指定された
パスのファイル...
中でやってること
• Esprima, PostCSSでコメント部をパースしてSprocketsディレクティブ
(require, require_tree, stub, etc)を解釈

=> CoffeeScriptの複数行コメントによるデ...
TODO
• Sprocketsディレクティブの完全サポート(現
状は100%サポートしているわけではない)
• ES2015で書いたファイルもrequireディレク
ティブで読み込みたい(そうするとコンポー
ネント単位からでもES2015への...
少し宣伝
• 2/16発売のWEB+DB PRESS「Web
サービス開発徹底攻略vol.2」に、
freee社の「急成長を支えたコード
とプロセスの改善」が収録されてい
ます。

その後の取り組み(主にフロントエ
ンド周り)についても書かれて...
Upcoming SlideShare
Loading in …5
×

gulp-sprockets、あるいはRailsのAssetsのビルドについて

2,030 views

Published on

Node学園 19限目の発表資料

Published in: Technology
  • Be the first to comment

gulp-sprockets、あるいはRailsのAssetsのビルドについて

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

×