新宿.rb #30 LT資料

1. 僕はどうしてもlibsass
が使いたかったんだ！
@joe-re

2. 自己紹介
• 名前: joe-re(じょー)
• freeeという会社で働いています
• この前までクラウド会計やってましたが、
今はクラウド給与計算やってます

4. 前にもSprocketsを捨てたいLTした
ことがあるので資料貼ってみます
• http://www.slideshare.net/
masatonoguchi169/sprockets-49965435

5. Sprocketsを捨てるには
２つの道がある

6. Railsのassets pipelineを一切
使わない！の道
• gulp等のビルドツールを使い、concat、
minify、uglify、fingerprint付与などの
Sprocketsさんがやっている仕事を全部奪う
• 成果物はPublic配下に出力する
• まさしく理想の世界！

7. Railsのassets pipelineを一切
使わない！の壁
• fingerprintの解決が難しい
• フロント側で単純に付与しただけでは、Railsの
asset_pathヘルパーが一切効かなくなる
• manifest.jsonを生成することでRails側に伝えること
は可能だが、こいつはライブリロードされない
• 一気にやらないといけない作業の量やばすぎ

8. フロント側の成果物をapp/assets
に吐き出す！の道
• concat、uglify、minify、fingerprintなどの処
理は従来通りSprocketsにお任せ！
• まだフロントで解決できないものは、とりあ
えずapp/assets配下にそのままコピーしてお
けば何とかなるので、徐々に作業可能

9. フロント側の成果物をapp/assets
に吐き出す！の壁
• 結局Sprocketsから脱却できてない
• 常にSprocketsとの良好な関係を
意識し続けなければプロダクトが死ぬ

10. 今回は
app/assets配下に
gulpで生成した成果物を
出力する道を選んだ
場合の話です

11. それから僕たちは少しづつ
Sprocketsから距離をおき始めたんだ
• jsのビルドはwebpackで！
• es6-modulesで依存関係を定義
• styleのビルドはnode-sass使う！
• などなど

12. jsのビルド構築にも数々の
ドラマがありましたが

13. 今回はstyleのビルドの
話をします

14. そもそも僕たちの
プロダクトには
styleのビルド改善に
早く着手しなければならない
重大な問題があったのだ

15. Sprocketsで
出力しているassetsは、
ファイルに変更がないとき、

16. キャッシュが効きます！

17. つまり前回と同じassetsを
使うので、ビルドしません

18. しかしキャッシュが
効かない時、恐ろしい現象が
起きていました

19. 普段10分ぐらいの
デプロイ時間がなんと

20. (゜Д゜) !?

21. やばい

22. 原因は、複雑に処理を
定義していたscssファイルの
ビルド時間でした

23. そこに颯爽と登場するlibsass!
• Ruby に依存しないですげー早いyabeeeや
つ！
• libsassはC/C++ 実装なsassのコンパイラーだ
けど、node-sassでnode.jsの世界で扱うこと
ができる

24. Ruby Sass, LibSass – What's
the Difference?
http://sassbreak.com/ruby-
sass-libsass-differences/

25. ローカルで試しにかけて
みたところ、なんとstyle
のビルド時間は1分！

26. こいつだ、こいつしかねぇ

27. そこに立ちはだかる2つの壁

28. 1. 複数エントリーポイントが
あるときの依存関係
(@import)の解決
2. asset_pathヘルパーの解決

29. 複数エントリーポイントがあるときの
依存関係を解決するにあたっての課題
• いくら速いとはいえ、開発中にファイルを変更するた
びに1分のビルドが走るのは苦痛。差分だけビルドし
たい。
• もともとstyleはページ単位で分割していたため、エン
トリーポイントが複数ある。
• 単純に変更のあったファイルをビルドするだけだと、
@import元を れない

30. いや、でも待てよ

31. node-sassの
watchオプションって
@import ってるよな

32. あれどうやってるんだ？？

33. というわけで解決した
• http://qiita.com/joe-re/items/
542b3f6fdc577cf50509
• node-sassは、sass-graphというnpmを使って っ
ていた
• こいつをgulp taskに組み込んだ
• ビルド時間が0.1secに！

34. こんな感じ

35. asset_pathヘルパーを
解決するにあたっての課題
• sassにはasset_pathヘルパーなんてもちろんない
ので、解決してくれない
• Sprocketsにはcssのプロセッサーがないので.css
ではasset_pathを解釈しない
• 自分でSprocketsのプロセッサー作ればいけるの
かも？

36. 腕力で解決を図る

37. 無理やり.css.erbに変換する
か。erbなら余計な処理もな
くて軽いでしょ

38. というわけで解決した
• http://qiita.com/joe-re/items/
a3366421b5fc538f6eae
• lib-sassをかけた上で、gulp task内で正規表現
を使ってsassのasset_helperの記法を無理やり
erbの記法に置換する

39. こんな感じ

40. お前それかっこいいと
思ってんの？

41. 思ってませんすみません
もっと良いやり方ご存知の方
教えてください
是非お願いします

42. かくして僕たちは手に入れた

43. ﾜｰｲヽ(ﾟ ﾟ)ﾒ(ﾟ ﾟ)ﾒ(ﾟ ﾟ)ﾉﾜｰｲ

44. おわり