Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sprockets絶ちに挑戦した

15694ff24d0637f5299eb42fbe7f1d16?s=47 katryo
November 03, 2014

 Sprockets絶ちに挑戦した

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

15694ff24d0637f5299eb42fbe7f1d16?s=128

katryo

November 03, 2014
Tweet

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 Λஔ͖׵͑Δ

  11. None
  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͢Δ
  16. None
  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ઈͪɺͰ͖ͳ͘͸ͳ͍͚Ͳ
 ͚ͬ͜͏໘౗Ͱͨ͠ ! ΍ΔͳΒ֮ޛͯ͠Ͷˑ