Sprockets絶ちに挑戦した

RailsアプリケーションからSprocketsが受け持っている処理をNodeパッケージに移そうとした挑戦の記録です。joker1007さんの https://github.com/joker1007/rails_browserify_sample や https://speakerdeck.com/joker1007/throw-away-sprockets を参考にしました
作ったのはこちら https://github.com/katryo/katryo_rails4

Transcript

1. Sprocketsઈͪʹ௅ઓͨ͠ @katryo
2. @katryo RubyͱRailsɺ޷͖Ͱ ͢ɻ %FOLJOPWFMͱ͍͏8FCΞϓϦӡӦͯ͠·͢ɻ
   ʮ8FCΤϯδχΞͷͨΊͷ8FCαʔϏεσβΠϯ࣮ફߨ࠲ʯ
 ͷ୊ࡐʹͳΓ·ͨ͠
3. ࠷ॳʹ݁࿦
4. 4QSPDLFUT
   ઈͯ·ͤΜͰͨ͠
5. ͯ͞
6. 4QSPDLFUTͱ͸ʁ
7. Rack޲͚ϥΠϒϥϦ • ΞηοτʹΞΫηε͢ΔͨΊͷύε؅ཧ • SASS, CoffeeScriptͳͲͷίϯύΠϧ • ίϯύΠϧ࣌ɺϋογϡ஋Λ༩͑ͯdigest͢ Δ͜ͱ΋Ͱ͖Δ • ґଘؔ܎΋؅ཧ
8. ௒ศར ͚ͩͲ ͨ·ʹࠔΔ
9. SprocketsΛ࢖͍ͬͯͯࠔΔ͜ͱ • ϓϦίϯύΠϧͰམͪΔ • productionͩͱͳ͔ͥը૾͕404 • CoffeeScriptҎ֎ͷAltJS࢖͍͍ͨ • σΧΠ͠Կ΍ͬͯΔ͔Α͘Θ͔ΒΜ
10. rake assets:precompile Λஔ͖׵͑Δ
12. औͬͨઓུ • gulpͰ࣮ߦλεΫΛ؅ཧ • SASS, CoffeeͷίϯύΠϧ΋gulpͷλεΫͰ࣮ߦ • Nodeͷύοέʔδ͸npmͰ؅ཧ • ϑϩϯτΤϯυͷϥΠϒϥϦ͸bowerͰ؅ཧ • JSͷґଘؔ܎͸BrowserifyͰղܾ
13. rake assets:precompileͰ΍ͬͯ ͍Δ͜ͱΛ࠶ݱͤͶ͹ͳΒͳ͍ • app/assets ҎԼͷϑΝΠϧΛίϯύΠϧ • ϑΝΠϧ໊ʹϋογϡ஋Λ଍ͯ͠digestʹ͢Δ • public/assetsҎԼʹΞηοτΛೖΕΔ • ݩͷϑΝΠϧ໊ͱdigestʹͳͬͨϑΝΠϧ໊ͱͷ ϚοϐϯάΛmanifest-{md5ͷϋογϡ஋}.jsonʹॻ ͍ͯpublic/assetsʹೖΕΔ
14. Ͳ͏΍ͬͨΒ rake assets:precompileΛ
 ୅ସͰ͖Δͷ͔ʁ
15. SprocketsͷλεΫΛ୅ସ • CoffeeScript, SCSSΛίϯύΠϧ • JSΛॱ൪௨Γʹฒ΂ͯ1ͭͷϑΝΠϧʹ͢Δ • JSΛuglify • CSSΛminify • ϑΝΠϧ໊ʹϋογϡ஋Λ௥Ճͯ͠digest͢Δ
17. CoffeeScript, SCSSΛ
 ίϯύΠϧ
18. gulpͰΑ͘΍Δ΍ͭ sass = require ‘gulp-sass' gulp.task 'css', -> gulp .src ['./app/assets/stylesheets/*.scss', './bower_components/ bootstrap-sass/dist/css/bootstrap.min.css'] .pipe plumber() .pipe sass()
19. ίϯύΠϧ໰୊ղܾ
20. JSΛॱ൪௨Γʹฒ΂ͯ1ͭͷ ϑΝΠϧʹ͢Δ
21. Browserify & Debowerify
22. Browserify • NodeͷྲّྀͰॻ͍ͨJSͷίʔυΛϒϥ ΢β޲͚ʹม׵͢Δ • ґଘؔ܎Λఆٛͯ͠هड़Ͱ͖Δ • ΋ͱ΋ͱ͸NodeύοέʔδΛϒϥ΢β Ͱ΋࢖͑ΔΑ͏ʹ͢ΔϥΠϒϥϦͩͬͨ • ࠓͰ΋ͦͷ໨తͰ࢖͑Δ
23. Debowerify • BowerύοέʔδΛBrowserify͕ѻ͑ΔΑ͏ʹ ͢Δ • gulpͷbrowserifyλεΫ಺Ͱར༻͢Δ
24. JSͷgulp task
25. entry.coffee /PEFͬΆ͘ɺґଘؔ܎Λهड़
26. JSͷґଘؔ܎ղܾ
27. JSΛuglify => gulp-uglify CSSΛminify => concat͔ͯ͠Β gulp-css-minify
28. ܰྔԽɾ೉ಡԽ໰୊ղܾ
29. ϑΝΠϧ໊ʹϋογϡ஋Λ௥ Ճͯ͠digest͢Δ
30. rake assets:precompile ͷ࢓ࣄͷͻͱͭ
31. digestͱ͸ʁ ϑΝΠϧͷ಺༰Λ΋ͱʹϋογϡ஋Λࢉग़͠ɺ ϑΝΠϧ໊ʹ௥ه͢Δɻ somefile.js => somefile-d2403a83.js ϑΝΠϧͷ಺༰͕มԽͨ͠ͱ͖͚ͩɺϑΝΠϧ໊΋ม Խ͢Δɻ ϒϥ΢βͷΩϟογϡରࡦɺCDNରԠʹޮՌత
32. image_path(‘pic.jpg’) ͱ͔ͷϝιουͰɺ
 ಡΈࠐΉϑΝΠϧΛ
 ಈతʹมԽ͍ͤͯ͞Δ asset_path(‘background.jpg’)
33. gulp-rev & gulp-rev-rails-manifest
34. ϑΝΠϧ໊ʹϋογϡ஋Λ௥Ճͯ͠ɺ manifest-{md5hash}.jsonΛ࡞Δ
35. manifest-{md5hash}.json public/assets಺ͷϑΝΠϧ໊ͱɺapp/assets಺ͷϑΝΠϧ໊ͷ ରԠ෇͚Λهड़ɻSprockets͸͜ΕΛಡΜͰɺasset_pathͳͲͷ ύεΛϑΝΠϧ໊ͱؔ࿈෇͚Δ
36. digest໰୊ղܾ
 ……ͱɺ͜ͷͱ͖͸ࢥ͍ͬͯ·ͨ͠
37. ࠷ޙͷఢ
38. CSS಺ͷasset_path
39. css.erb(scss.erb)ͷதͰ
 asset_pathΛ࢖͍ͬͯΔ background: url(<%= asset_path(’retina_wood.png’) %>);
40. μϝͰͨ͠
41. ໰୊ • scss.erb಺͸ɺNodeͰCSSʹίϯύΠϧͤͶ ͹ͳΒͳ͍ • ͔͠͠scss.erb಺ͷasset_pathϝιου͸ɺ NodeͰ͸ཧղͰ͖ͳ͍ • ແཧΆ͍……
42. ͜ΕΛղܾ͢Δʹ͸ʁ • CSS಺ͰɺdigestͱݩϑΝΠϧ໊ͷؔ࿈෇͚Λ ߦ͏ϝιου͸ɺNodeͰղܾͰ͖Δॻ͖ํͰ ߦ͏ • ؤுΕ͹asset_pathͱ͔Λmanifest.jsonʹର Ԡͤͯ͞ɺcssͷॻ͖׵͑Λߦ͏ॲཧΛNode Ͱࣗ࡞Ͱ͖ͦ͏͚ͩͲɺͪΐͬͱ໘౗ͦ͏
43. Ͱ΋CSS಺Ͱ
 SprocketsΛ࢖Θͳ͚Ε͹
 ͳΜͱ͔ͳΔ
44. ײ૝
45. SprocketsઈͪɺͰ͖ͳ͘͸ͳ͍͚Ͳ
 ͚ͬ͜͏໘౗Ͱͨ͠ ! ΍ΔͳΒ֮ޛͯ͠Ͷˑ