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,173 views

Published on

Node学園 19限目の発表資料

Published in: Technology
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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社の「急成長を支えたコード とプロセスの改善」が収録されてい ます。
 その後の取り組み(主にフロントエ ンド周り)についても書かれている ので、ぜひご覧ください!

×