Tweet
Tweet

Slide 1

Slide 1 text

Sprocketsઈͪʹ௅ઓͨ͠ @katryo

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

࠷ॳʹ݁࿦

Slide 4

Slide 4 text

4QSPDLFUT ઈͯ·ͤΜͰͨ͠

Slide 5

Slide 5 text

ͯ͞

Slide 6

Slide 6 text

4QSPDLFUTͱ͸ʁ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

௒ศར ͚ͩͲ ͨ·ʹࠔΔ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

rake assets:precompile Λஔ͖׵͑Δ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Ͳ͏΍ͬͨΒ rake assets:precompileΛ
 ୅ସͰ͖Δͷ͔ʁ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

CoffeeScript, SCSSΛ
 ίϯύΠϧ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ίϯύΠϧ໰୊ղܾ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Browserify & Debowerify

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

JSͷgulp task

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

JSͷґଘؔ܎ղܾ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ܰྔԽɾ೉ಡԽ໰୊ղܾ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

rake assets:precompile ͷ࢓ࣄͷͻͱͭ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

image_path(‘pic.jpg’) ͱ͔ͷϝιουͰɺ
 ಡΈࠐΉϑΝΠϧΛ
 ಈతʹมԽ͍ͤͯ͞Δ asset_path(‘background.jpg’)

Slide 33

Slide 33 text

gulp-rev & gulp-rev-rails-manifest

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

digest໰୊ղܾ
 ……ͱɺ͜ͷͱ͖͸ࢥ͍ͬͯ·ͨ͠

Slide 37

Slide 37 text

࠷ޙͷఢ

Slide 38

Slide 38 text

CSS಺ͷasset_path

Slide 39

Slide 39 text

css.erb(scss.erb)ͷதͰ
 asset_pathΛ࢖͍ͬͯΔ background: url(<%= asset_path(’retina_wood.png’) %>);

Slide 40

Slide 40 text

μϝͰͨ͠

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Ͱ΋CSS಺Ͱ
 SprocketsΛ࢖Θͳ͚Ε͹
 ͳΜͱ͔ͳΔ

Slide 44

Slide 44 text

ײ૝

Slide 45

Slide 45 text

SprocketsઈͪɺͰ͖ͳ͘͸ͳ͍͚Ͳ
 ͚ͬ͜͏໘౗Ͱͨ͠ ! ΍ΔͳΒ֮ޛͯ͠Ͷˑ