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
   

   View Slide

2. @katryo
   RubyͱRailsɺ޷͖Ͱ
   ͢ɻ
   %FOLJOPWFMͱ͍͏8FCΞϓϦӡӦͯ͠·͢ɻ
   ʮ8FCΤϯδχΞͷͨΊͷ8FCαʔϏεσβΠϯ࣮ફߨ࠲ʯ

   ͷ୊ࡐʹͳΓ·ͨ͠
   

   View Slide

3. ࠷ॳʹ݁࿦
   

   View Slide

4. 4QSPDLFUT
   ઈͯ·ͤΜͰͨ͠
   

   View Slide

5. ͯ͞
   

   View Slide

6. 4QSPDLFUTͱ͸ʁ
   

   View Slide

7. Rack޲͚ϥΠϒϥϦ
   • ΞηοτʹΞΫηε͢ΔͨΊͷύε؅ཧ
   • SASS, CoffeeScriptͳͲͷίϯύΠϧ
   • ίϯύΠϧ࣌ɺϋογϡ஋Λ༩͑ͯdigest͢
   Δ͜ͱ΋Ͱ͖Δ
   • ґଘؔ܎΋؅ཧ
   

   View Slide

8. ௒ศར
   ͚ͩͲ
   ͨ·ʹࠔΔ
   

   View Slide

9. SprocketsΛ࢖͍ͬͯͯࠔΔ͜ͱ
   • ϓϦίϯύΠϧͰམͪΔ
   • productionͩͱͳ͔ͥը૾͕404
   • CoffeeScriptҎ֎ͷAltJS࢖͍͍ͨ
   • σΧΠ͠Կ΍ͬͯΔ͔Α͘Θ͔ΒΜ
   

   View Slide

10. rake assets:precompile
    Λஔ͖׵͑Δ
    

    View Slide

11. View Slide

12. औͬͨઓུ
    • gulpͰ࣮ߦλεΫΛ؅ཧ
    • SASS, CoffeeͷίϯύΠϧ΋gulpͷλεΫͰ࣮ߦ
    • Nodeͷύοέʔδ͸npmͰ؅ཧ
    • ϑϩϯτΤϯυͷϥΠϒϥϦ͸bowerͰ؅ཧ
    • JSͷґଘؔ܎͸BrowserifyͰղܾ
    

    View Slide

13. rake assets:precompileͰ΍ͬͯ
    ͍Δ͜ͱΛ࠶ݱͤͶ͹ͳΒͳ͍
    • app/assets ҎԼͷϑΝΠϧΛίϯύΠϧ
    • ϑΝΠϧ໊ʹϋογϡ஋Λ଍ͯ͠digestʹ͢Δ
    • public/assetsҎԼʹΞηοτΛೖΕΔ
    • ݩͷϑΝΠϧ໊ͱdigestʹͳͬͨϑΝΠϧ໊ͱͷ
    ϚοϐϯάΛmanifest-{md5ͷϋογϡ஋}.jsonʹॻ
    ͍ͯpublic/assetsʹೖΕΔ
    

    View Slide

14. Ͳ͏΍ͬͨΒ
    rake assets:precompileΛ

    ୅ସͰ͖Δͷ͔ʁ
    

    View Slide

15. SprocketsͷλεΫΛ୅ସ
    • CoffeeScript, SCSSΛίϯύΠϧ
    • JSΛॱ൪௨Γʹฒ΂ͯ1ͭͷϑΝΠϧʹ͢Δ
    • JSΛuglify
    • CSSΛminify
    • ϑΝΠϧ໊ʹϋογϡ஋Λ௥Ճͯ͠digest͢Δ
    

    View Slide

16. View Slide

17. CoffeeScript, SCSSΛ

    ίϯύΠϧ
    

    View Slide

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()
    

    View Slide

19. ίϯύΠϧ໰୊ղܾ
    

    View Slide

20. JSΛॱ൪௨Γʹฒ΂ͯ1ͭͷ
    ϑΝΠϧʹ͢Δ
    

    View Slide

21. Browserify
    &
    Debowerify
    

    View Slide

22. Browserify
    • NodeͷྲّྀͰॻ͍ͨJSͷίʔυΛϒϥ
    ΢β޲͚ʹม׵͢Δ
    • ґଘؔ܎Λఆٛͯ͠هड़Ͱ͖Δ
    • ΋ͱ΋ͱ͸NodeύοέʔδΛϒϥ΢β
    Ͱ΋࢖͑ΔΑ͏ʹ͢ΔϥΠϒϥϦͩͬͨ
    • ࠓͰ΋ͦͷ໨తͰ࢖͑Δ
    

    View Slide

23. Debowerify
    • BowerύοέʔδΛBrowserify͕ѻ͑ΔΑ͏ʹ
    ͢Δ
    • gulpͷbrowserifyλεΫ಺Ͱར༻͢Δ
    

    View Slide

24. JSͷgulp task
    

    View Slide

25. entry.coffee
    /PEFͬΆ͘ɺґଘؔ܎Λهड़
    

    View Slide

26. JSͷґଘؔ܎ղܾ
    

    View Slide

27. JSΛuglify => gulp-uglify
    CSSΛminify => concat͔ͯ͠Β
    gulp-css-minify
    

    View Slide

28. ܰྔԽɾ೉ಡԽ໰୊ղܾ
    

    View Slide

29. ϑΝΠϧ໊ʹϋογϡ஋Λ௥
    Ճͯ͠digest͢Δ
    

    View Slide

30. rake assets:precompile
    ͷ࢓ࣄͷͻͱͭ
    

    View Slide

31. digestͱ͸ʁ
    ϑΝΠϧͷ಺༰Λ΋ͱʹϋογϡ஋Λࢉग़͠ɺ
    ϑΝΠϧ໊ʹ௥ه͢Δɻ
    somefile.js => somefile-d2403a83.js
    ϑΝΠϧͷ಺༰͕มԽͨ͠ͱ͖͚ͩɺϑΝΠϧ໊΋ม
    Խ͢Δɻ
    ϒϥ΢βͷΩϟογϡରࡦɺCDNରԠʹޮՌత
    

    View Slide

32. image_path(‘pic.jpg’)
    ͱ͔ͷϝιουͰɺ

    ಡΈࠐΉϑΝΠϧΛ

    ಈతʹมԽ͍ͤͯ͞Δ
    asset_path(‘background.jpg’)
    

    View Slide

33. gulp-rev
    &
    gulp-rev-rails-manifest
    

    View Slide

34. ϑΝΠϧ໊ʹϋογϡ஋Λ௥Ճͯ͠ɺ
    manifest-{md5hash}.jsonΛ࡞Δ
    

    View Slide

35. manifest-{md5hash}.json
    public/assets಺ͷϑΝΠϧ໊ͱɺapp/assets಺ͷϑΝΠϧ໊ͷ
    ରԠ෇͚Λهड़ɻSprockets͸͜ΕΛಡΜͰɺasset_pathͳͲͷ
    ύεΛϑΝΠϧ໊ͱؔ࿈෇͚Δ
    

    View Slide

36. digest໰୊ղܾ

    ……ͱɺ͜ͷͱ͖͸ࢥ͍ͬͯ·ͨ͠
    

    View Slide

37. ࠷ޙͷఢ
    

    View Slide

38. CSS಺ͷasset_path
    

    View Slide

39. css.erb(scss.erb)ͷதͰ

    asset_pathΛ࢖͍ͬͯΔ
    background: url();
    

    View Slide

40. μϝͰͨ͠
    

    View Slide

41. ໰୊
    • scss.erb಺͸ɺNodeͰCSSʹίϯύΠϧͤͶ
    ͹ͳΒͳ͍
    • ͔͠͠scss.erb಺ͷasset_pathϝιου͸ɺ
    NodeͰ͸ཧղͰ͖ͳ͍
    • ແཧΆ͍……
    

    View Slide

42. ͜ΕΛղܾ͢Δʹ͸ʁ
    • CSS಺ͰɺdigestͱݩϑΝΠϧ໊ͷؔ࿈෇͚Λ
    ߦ͏ϝιου͸ɺNodeͰղܾͰ͖Δॻ͖ํͰ
    ߦ͏
    • ؤுΕ͹asset_pathͱ͔Λmanifest.jsonʹର
    Ԡͤͯ͞ɺcssͷॻ͖׵͑Λߦ͏ॲཧΛNode
    Ͱࣗ࡞Ͱ͖ͦ͏͚ͩͲɺͪΐͬͱ໘౗ͦ͏
    

    View Slide

43. Ͱ΋CSS಺Ͱ

    SprocketsΛ࢖Θͳ͚Ε͹

    ͳΜͱ͔ͳΔ
    

    View Slide

44. ײ૝
    

    View Slide

45. SprocketsઈͪɺͰ͖ͳ͘͸ͳ͍͚Ͳ

    ͚ͬ͜͏໘౗Ͱͨ͠
    !
    ΍ΔͳΒ֮ޛͯ͠Ͷˑ
    

    View Slide