Desmistificando o Asset Pipeline

Desmistificando o Asset Pipeline

O (tão controverso) Asset Pipeline foi introduzido no Rails 3.1 com o intuito de facilitar nossas vidas quando precisamos servir assets em nossos projetos. Ao tratá-los como parte fundamental de uma aplicação web, podemos melhorar a organização do nosso código front-end e dirigi-lo para um caminho mais robusto e modular.

Embora alguns desenvolvedores não gostem da forma como o Asset Pipeline funciona, ele introduz conceitos fundamentais no Rails que resolvem questões que são recorrentes em grandes projetos, como a distribuição de assets através de engines, modularização, minificação e outros.

Neste talk, veremos como tirar máximo proveito do Asset Pipeline, como ele se integra ao Rails e algumas alternativas possíveis da sua implementação atual.

7c12adb8b5521c060ab4630360a4fa27?s=128

Plataformatec

September 25, 2012
Tweet

Transcript

  1. "44&51*1&-*/& desmistificando o

  2. !3POEZ

  3. None
  4. "(&/%"

  5. 1PSRVFQSFDJTÂWBNPT "(&/%"

  6. 1PSRVFQSFDJTÂWBNPT 0WFSWJFX "(&/%"

  7. 1PSRVFQSFDJTÂWBNPT 0WFSWJFX 4QSPDLFUT "(&/%"

  8. 1PSRVFQSFDJTÂWBNPT 0WFSWJFX 4QSPDLFUT &YFD+4 UIFSVCZSBDFSFPVUSBTSVOUJNFT "(&/%"

  9. 1PSRVFQSFDJTÂWBNPT 0WFSWJFX 4QSPDLFUT &YFD+4 UIFSVCZSBDFSFPVUSBTSVOUJNFT 1SÉQSPDFTTBEPSFTDVTUPNJ[BEPT "(&/%"

  10. 1PSRVFQSFDJTÂWBNPT 0WFSWJFX 4QSPDLFUT &YFD+4 UIFSVCZSBDFSFPVUSBTSVOUJNFT 1SÉQSPDFTTBEPSFTDVTUPNJ[BEPT (FNJpDBOEPBTTFUTSFVTÂWFJT "(&/%"

  11. 1PSRVFQSFDJTÂWBNPT 0WFSWJFX 4QSPDLFUT &YFD+4 UIFSVCZSBDFSFPVUSBTSVOUJNFT 1SÉQSPDFTTBEPSFTDVTUPNJ[BEPT (FNJpDBOEPBTTFUTSFVTÂWFJT %JDBT USVRVFTFPVUSBTGFJUJÇBSJBT "(&/%"

  12. 1PSRVFQSFDJTÂWBNPT 0WFSWJFX 4QSPDLFUT &YFD+4 UIFSVCZSBDFSFPVUSBTSVOUJNFT 1SÉQSPDFTTBEPSFTDVTUPNJ[BEPT (FNJpDBOEPBTTFUTSFVTÂWFJT %JDBT USVRVFTFPVUSBTGFJUJÇBSJBT "MUFSOBUJWBT

    "(&/%"
  13. None
  14. 3"*-4¬36#:

  15. 3"*-4¬36#: '0$0/0%0.°/*0%0130#-&."

  16. 3"*-4¬36#: '0$0/0%0.°/*0%0130#-&." $0/7&/ª§040#3&$0/'*(63"ª§0

  17. 3"*-4¬36#: '0$0/0%0.°/*0%0130#-&." $0/7&/ª§040#3&$0/'*(63"ª§0 03("/*;"ª§0%&"326*704

  18. &0/%&&6(6"3%0 04.&64"44&54

  19. &0/%&&6(6"3%0 04.&64"44&54 public/*

  20. &0/%&&6(6"3%0 04.&64"44&54 public/* limbo

  21. "44&54 DTT KBWBTDSJQU  JNBHFOT GPOUFT  BVEJP WJEFP

  22. 40.04/&(-*(&/5&4 $0.$¶%*(0'30/5&/% .&"$6-1"

  23. .0%6-"3*;"ª§0 05*.*;"ª§0 &

  24. $"."-)"ª0%&"326*704 26&"6.&/5"0/¼.&30%& 3&26&454&"-"5­/$*" ."/5&356%0&."1&/"4 6.*.&/40"326*70 ."/65&/ª§0$3*.*/04" 9 1) 2)

  25. None
  26. None
  27. None
  28. None
  29. None
  30. %*.*/6*3/¼.&30%&3&26*4*ª¸&4)551

  31. %*.*/6*3/¼.&30%&3&26*4*ª¸&4)551 .*/*'*$"3+"7"4$3*15&$44

  32. %*.*/6*3/¼.&30%&3&26*4*ª¸&4)551 .*/*'*$"3+"7"4$3*15&$44 $0.10/&/5&4(;*1

  33. IUUQXXXZPVUVCFDPNXBUDI W6M.Q*)),T

  34. "If a problem is very commom, we end up with

    a proliferation of choices." :FIVEB,BU[
  35. “...but we should have to make fewer decisions.” :FIVEB,BU[

  36. 4&37*3"44&54/§0¬ 53*7*"-

  37. 6. 1*1&-*/& 1"3"03&4("5&

  38. a linear sequence of specialized modules which performs a task,

    like an assembly line in a factory. pipe.line noun
  39. 1*1&-*/& the

  40. 13¬130$&44"3 1*1&-*/& the

  41. 13¬130$&44"3 $0/$"5&/"3 1*1&-*/& the

  42. 13¬130$&44"3 $0/$"5&/"3 .*/*'*$"3 1*1&-*/& the

  43. 13¬130$&44"3 $0/$"5&/"3 .*/*'*$"3 $0.13*.*3 1*1&-*/& the

  44. 13¬130$&44"3 $0/$"5&/"3 .*/*'*$"3 $0.13*.*3 $"$)&#645*/( 1*1&-*/& the

  45. QVCMJD\KBWBTDSJQUTcTUZMFTIFFUTcJNBHFT^ 3"*-4

  46. 3"*-4

  47. IUUQXXXZPVUVCFDPNXBUDI WD(E$*)IG"6

  48. "We're elevating this stuff up to the same importance as

    Ruby code itself." %BWJE))BOTTPO3BDF$BS%SJWFS
  49. $63"5&%'3".&803,

  50. rails new rs-on-rails

  51. %"%*4$¶3%*" (&.'*-&

  52. (FNpMF group :assets do gem 'sass-rails', '~> 3.2.3' # gem

    'therubyracer', :platforms => :ruby gem 'coffee-rails', '~> 3.2.1' gem 'uglifier', '>= 1.0.3' end
  53. 0"44&51*1&-*/&*.1¸& 6."/07"&45365363" 13"03("/*;"ª§0%& "44&54

  54. 0"44&51*1&-*/&*.1¸& 6."/07"&45365363" 13"03("/*;"ª§0%& "44&54

  55. 0"44&51*1&-*/&46(&3& 6."/07"&45365363" 13"03("/*;"ª§0%& "44&54

  56. BQQBTTFUT MJCBTTFUT WFOEPSBTTFUT

  57. None
  58. None
  59. None
  60. None
  61. "44&5#6/%-&4

  62. "44&5#6/%-&4 BQQMJDBUJPOKT BQQMJDBUJPODTT

  63. <head> <title>Rs on Rails</title> <%= stylesheet_link_tag "application", media: "all" %>

    <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> BQQWJFXTMBZPVUTBQQMJDBUJPOIUNMFSC
  64. None
  65. BQQMJDBUJPODTT

  66. BQQMJDBUJPODTT SFTFUDTT MBZPVUDTT OBWJHBUJPODTT TJEFCBSDTT UZQPHSBQIZDTT GPSNTDTT UIFNFDTT

  67. /* *= require_self *= require reset *= require layout *=

    require sidebar *= require navigation *= require typography *= require forms *= require colors */ BQQWJFXTMBZPVUTBQQMJDBUJPODTT
  68. /* *= require_self *= require reset *= require layout *=

    require sidebar *= require navigation *= require typography *= require forms *= require colors */ BQQWJFXTMBZPVUTBQQMJDBUJPODTT no jargão, o “manifesto”
  69. None
  70. DPOpHFOWJSPONFOUTEFWFMPQNFOUSC RsOnRails::Application.configure do config.assets.debug = false end

  71. None
  72. DPOpHFOWJSPONFOUTEFWFMPQNFOUSC RsOnRails::Application.configure do config.assets.compress = true end

  73. None
  74. DPOpHFOWJSPONFOUTEFWFMPQNFOUSC RsOnRails::Application.configure do config.assets.digest = true end

  75. None
  76. http://localhost:3000/assets/application.css http://localhost:3000/assets/application.js

  77. http://localhost:3000/assets/application.css http://localhost:3000/assets/application.js

  78. http://localhost:3000/assets/application.css 04130$,&54.0/5"6." 6."3"$,"11/"305" BTTFUT http://localhost:3000/assets/application.js

  79. IUUQTHJUIVCDPNSBJMTSBJMTCMPCTUBCMFBDUJPOQBDLMJC TQSPDLFUTCPPUTUSBQSC-

  80. ."44¶&. %&7&-01.&/5

  81. $0.0'*$"&. 45"(*/(130%6$5*0/

  82. 130%6$5*0/ 4FSWJEPSXFC TFSWFPTBSRVJWPT QSÉDPNQJMBEPT

  83. DPOpHFOWJSPONFOUTEFWFMPQNFOUSC RsOnRails::Application.configure do config.assets.compress = false config.assets.debug = true end

  84. DPOpHFOWJSPONFOUTEFWFMPQNFOUSC RsOnRails::Application.configure do config.assets.compress = false config.assets.debug = true end

    RsOnRails::Application.configure do config.assets.compress = true config.assets.compile = false config.assets.digest = true end DPOpHFOWJSPONFOUTQSPEVDUJPOSC
  85. 04"44&54"/5&4%&&/53"3&.130%6ª§0 064&+" 13&$*4".04 13¬$0.1*-"3

  86. $ rake assets:precompile

  87. $ rake assets:precompile

  88. $ rake assets:precompile

  89. /assets/application-9d75ac5c90e71cbe60d8e612a438af43.css /assets/application-9d75ac5c90e71cbe60d8e612a438af43.css.gz

  90. /assets/application-9d75ac5c90e71cbe60d8e612a438af43.css ✓$0.1*-"%0 ✓$0/$"5&/"%0 ✓.*/*'*$"%0 ✓$"$)&#645&% '*/(&313*/5 ✓$0.13*.*%0 /assets/application-9d75ac5c90e71cbe60d8e612a438af43.css.gz

  91. None
  92. ."/*'&45:.-

  93. --- Aller_Rg.ttf: Aller_Rg-89086a78088e0ccdf7d5f3a2413b890c.ttf rails.png: rails-be8732dac73d845ac5b142c8fb5f9fb0.png application.js: application-d47f12ee8bceef5910c0e6d180ecf97c.js application.css: application-cf5421f21a42b9b487d6131006c60539.css QVCMJDBTTFUTNBOJGFTUZNM

  94. /§064"3¥4-*7& $0.1*-"5*0/&. 130%6ª§0

  95. 70-5"/%0"0"11-*$"5*0/ #6/%-&

  96. None
  97. $"%­0+26&3:26& %&7&3*"&45"3"26*

  98. 4&(63"&44"%¼7*%"

  99. 13¬130$&44"%03&4

  100. TQFBLFSTKT

  101. None
  102. TQFBLFSTDPGGF

  103. GPSNTDTT

  104. None
  105. GPSNTDTTTDTT

  106. GPSNTDTTTDTTFSC

  107. GPSNTDTTTDTTFSC $"%&*"%&13¬130$&44".&/50

  108. IUUQTHJUIVCDPNNFUBTLJMMTMFTTSBJMT

  109. IUUQTHJUIVCDPNMVDBTNB[[BSVCZTUZMVT

  110. 4130$,&54

  111. require "sprockets"

  112. require "sprockets" env = Sprockets::Environment.new

  113. require "sprockets" env = Sprockets::Environment.new env.append_path "assets/javascripts"

  114. require "sprockets" env = Sprockets::Environment.new env.append_path "assets/javascripts" application_js = env["application.js"]

  115. require "sprockets" env = Sprockets::Environment.new env.append_path "assets/javascripts" application_js = env["application.js"]

    logical path
  116. puts application_js.inspect

  117. puts application_js.inspect # #<Sprockets::BundledAsset:0x3fd7304a3570 # pathname="/Users/rondy/sprockets/assets/javascripts/application.js", # mtime=2012-09-02 17:08:34 -0300,

    # digest="e643622cbd2c3f4d29b5fad9e329b2e8">
  118. puts application_js

  119. puts application_js # contents of `application.js` with its concatenated dependencies

  120. "1&/"4."*46." .06/5"#-&3"$,"11

  121. require 'sprockets' map '/assets' do environment = Sprockets::Environment.new environment.append_path 'app/assets/javascripts'

    environment.append_path 'app/assets/stylesheets' run environment end map '/' do run YourRackApp end
  122. 4130$,&54

  123. guard 'sprockets', destination: "build/javascripts", asset_paths: ['/src/javascripts'] do watch (%r{src/javascripts/application.js}) end

    (VBSEpMF
  124. 70-5"/%0"0 (&.'*-&%" %*4$¶3%*"

  125. (FNpMF group :assets do gem 'sass-rails', '~> 3.2.3' # gem

    'therubyracer', :platforms => :ruby gem 'coffee-rails', '~> 3.2.1' gem 'uglifier', '>= 1.0.3' end
  126. gem 'therubyracer', :platforms => :ruby

  127. &9&$+4

  128. &9&$+4 +"7"4$3*15 36#:

  129. require "execjs"

  130. require "execjs" ExecJS.eval "'red yellow blue'.split(' ')"

  131. require "execjs" ExecJS.eval "'red yellow blue'.split(' ')" # => ["red",

    "yellow", "blue"]
  132. $PGGF4DSJQU 6HMJGZGSJFOET

  133. $PGGF4DSJQU 6HMJGZGSJFOET &YFD+4

  134. 36/5*.& $PGGF4DSJQU 6HMJGZGSJFOET &YFD+4

  135. 36/5*.& $PGGF4DSJQU 6HMJGZGSJFOET /PEFKT &YFD+4

  136. 36/5*.& $PGGF4DSJQU 6HMJGZGSJFOET /PEFKT "QQMF +BWB4DSJQU$PSF &YFD+4

  137. 36/5*.& $PGGF4DSJQU 6HMJGZGSJFOET /PEFKT "QQMF +BWB4DSJQU$PSF .JDSPTPGU8JOEPXT 4DSJQU)PTU +4DSJQU &YFD+4

  138. 36/5*.& $PGGF4DSJQU 6HMJGZGSJFOET /PEFKT UIFSVCZSBDFS "QQMF +BWB4DSJQU$PSF .JDSPTPGU8JOEPXT 4DSJQU)PTU +4DSJQU

    &YFD+4
  139. 36/5*.& $PGGF4DSJQU 6HMJGZGSJFOET /PEFKT UIFSVCZSBDFS UIFSVCZSIJOP "QQMF +BWB4DSJQU$PSF .JDSPTPGU8JOEPXT 4DSJQU)PTU

    +4DSJQU &YFD+4
  140. None
  141. gem 'therubyracer', :platforms => :ruby

  142. gem 'therubyrhino', :platforms => :jruby

  143. None
  144. %*$"4 53626&4& 0653"4 '&*5*ª"3*"4

  145. 4130$,&5494"44

  146. $base-font-color: #555555; BQQBTTFUTTUZMFTIFFUTDPNNPODTTTDTT

  147. /* *= require common */ body { color: $base-font-color; }

    BQQBTTFUTTUZMFTIFFUTBQQMJDBUJPODTTTDTT $base-font-color: #555555; BQQBTTFUTTUZMFTIFFUTDPNNPODTTTDTT
  148. None
  149. SFRVJSFTBTT

  150. /* */ @import "common.css.scss"; body { color: $base-font-color; } BQQBTTFUTTUZMFTIFFUTBQQMJDBUJPODTTTDTT

  151. $3*"/%0/04404 13¶13*0413¬ 130$&44"%03&4

  152. class TimestampProcessor < Sprockets::Processor end MJCQSPDFTTPSTUJNFTUBNQ@QSPDFTTPSSC

  153. class TimestampProcessor < Sprockets::Processor def evaluate(context, locals) end end MJCQSPDFTTPSTUJNFTUBNQ@QSPDFTTPSSC

  154. class TimestampProcessor < Sprockets::Processor def evaluate(context, locals) data end end

    MJCQSPDFTTPSTUJNFTUBNQ@QSPDFTTPSSC
  155. class TimestampProcessor < Sprockets::Processor def evaluate(context, locals) current_timestamp = DateTime.now.to_s(:timestamp)

    ["/* #{current_timestamp} */", data].join("\n") end end MJCQSPDFTTPSTUJNFTUBNQ@QSPDFTTPSSC
  156. require "processors/timestamp_processor" Rails.application.assets. register_postprocessor("text/css", TimestampProcessor) DPOpHJOJUJBMJ[FSTTQSPDLFUTSC

  157. require "processors/timestamp_processor" Rails.application.assets. register_postprocessor("text/css", TimestampProcessor) Rails.application.assets. register_postprocessor("application/javascript", TimestampProcessor) DPOpHJOJUJBMJ[FSTTQSPDLFUTSC

  158. None
  159. (&.*'*$"/%0"44&54 3&64¥7&*4

  160. (&.*'*$"/%0"44&54 3&64¥7&*4 ","$0.04&34)08

  161. 4)08 /§04)08%&45

  162. var Showdest = { description: "Are you showdest, my friend?"

    } alert(Showdest.description); //= require_self //= require showdest BQQBTTFUTKBWBTDSJQUTTIPXEFTUKT BQQBTTFUTKBWBTDSJQUTBQQMJDBUJPOKT
  163. None
  164. $ bundle gem showdest

  165. $ bundle gem showdest $ cd showdest

  166. $ bundle gem showdest $ cd showdest $ mkdir -p

    vendor/assets/javascript
  167. $ bundle gem showdest $ cd showdest $ mkdir -p

    vendor/assets/javascript $ mv ~/code/rs-on-rails/app/assets/javascripts/showdest.js \ vendor/assets/javascript
  168. None
  169. group :assets do gem 'showdest', path: '/Users/rondy/code/showdest' end (FNpMF

  170. $ bundle && rails s

  171. $ bundle && rails s

  172. module Showdest class Engine < Rails::Engine end end TIPXEFTUMJCTIPXEFTUFOHJOFSC

  173. module Showdest class Engine < Rails::Engine end end TIPXEFTUMJCTIPXEFTUFOHJOFSC Gem::Specification.new

    do |gem| gem.add_dependency "railties", ">= 3.1", "< 5.0" end TIPXEFTUTIPXEFTUHFNTQFD
  174. require "showdest/version" require "showdest/engine" module Showdest end TIPXEFTUMJCTIPXEFTUSC

  175. $ bundle && rails s

  176. $ bundle && rails s

  177. -&.#3"%0+26&3:

  178. (&. 3"*-4&/(*/&

  179. None
  180. None
  181. None
  182. "-5&3/"5*7"4

  183. rails new rs-on-rails \ --skip-sprockets

  184. IUUQEPDVNFOUDMPVEHJUIVCDPNKBNNJU

  185. IUUQTHJUIVCDPNMJWJOHTPDJBMSBLFQJQFMJOF

  186. "*/%")¥.6*50."*4

  187. IUUQHVJEFTSVCZPOSBJMTPSHBTTFU@QJQFMJOFIUNM

  188. IUUQDPEFSCFSSZNFCMPHBTTFUQJQFMJOFGPSEVNNJFT

  189. IUUQBLJUBPOSBJMTDPNBTTFUQJQFMJOFQBSBJOJDJBOUFT IUUQBLJUBPOSBJMTDPNBTTFUQJQFMJOFQBSBJOJDJBOUFTQBSUF

  190. IUUQSBJMTDBTUTDPNFQJTPEFTVOEFSTUBOEJOHUIFBTTFUQJQFMJOF IUUQSBJMTDBTUTDPNFQJTPEFTBTTFUQJQFMJOFJOQSPEVDUJPO

  191. IUUQCMPHNJOVUFTDPNVOUBOHMJOHUIFSBJMTBTTFUQJQFMJOFQBSUDBDIFTBOEDPNQBTT IUUQCMPHNJOVUFTDPNVOUBOHMJOHUIFSBJMTBTTFUQJQFMJOFQBSUQSPEVDUJPO IUUQCMPHNJOVUFTDPNVOUBOHMJOHUIFSBJMTBTTFUQJQFMJOFQBSUDPOpHVSBUJPO IUUQCMPHNJOVUFTDPNVOUBOHMJOHUIFSBJMTBTTFUQJQFMJOFQBSUUSPVCMFTIPPUJOH

  192. IUUQQSBHQSPHDPNCPPLXBSWUIFSBJMTWJFX

  193. None
  194. &45".04$0/53"5"/%0 IUUQQMBUBGPSNBUFDDPNCSDPOUBDU

  195. 0#3*("%0