Turing School - Understanding the Asset Pipeline

Rails Asset Pipeline Lesson Slides

Transcript

1. Understanding the Asset Pipeline It cannot be understood
2. 1. What is the asset pipeline 2. Asset organization 3. Asset lookup 4. Manifests 5. ActionView helpers 6. Development vs. production
3. The Asset Pipeline
4. What is the Asset Pipeline?
5. Main Features
6. 1. Asset concatenation 2. Asset minification 3. Precompilation
7. What is fingerprinting?
8. global.css global-908e25f4bf641868d8683022a5b62f54.css
9. global.css /stylesheets/global.css?1309495796
10. Asset Organization
11. Assets Locations
12. 1. app/assets 2. lib/assets 3. vendor/assets
13. Asset directories are arbitrary
14. app/assets/javascripts/home.js lib/assets/javascripts/moovinator.js vendor/assets/tino_cochino/slider.js vendor/assets/barbie_hair/phonebox.js
15. http://localhost:3000/assets/home.js http://localhost:3000/assets/moovinator.js http://localhost:3000/assets/slider.js http://localhost:3000/assets/phonebox.js
16. Workshop
17. Clone Storedom $ git clone https://github.com/turingschool- examples/storedom.git asset_pipeline
18. bundle & setup the database $ bundle && rake db:setup
19. create a texts directory $ mkdir app/assets/texts
20. create a hello.txt file $ touch app/assets/texts/hello.txt
21. start the server and visit this path http://localhost:3000/assets/hello.txt
22. move the hello.txt file to 
 the javascripts folder $ mv app/assets/{texts,javascripts}/ hello.txt
23. visit / reload this path again http://localhost:3000/assets/hello.txt
24. create a hello.js file $ touch app/assets/stylesheets/hello.js
25. put this into hello.js Hello, is it me you are looking for?
26. visit this path http://localhost:3000/assets/hello.js
27. Asset Lookup
28. Enter this in the rails console > y Rails.application.config.assets.paths
29. This is my load path --- - "/Users/Jorge/Dropbox/projects/classes/storedom/app/assets/images" - "/Users/Jorge/Dropbox/projects/classes/storedom/app/assets/javascripts" - "/Users/Jorge/Dropbox/projects/classes/storedom/app/assets/stylesheets" - "/Users/Jorge/Dropbox/projects/classes/storedom/vendor/assets/javascripts" - "/Users/Jorge/Dropbox/projects/classes/storedom/vendor/assets/stylesheets" - "/Users/Jorge/.rvm/gems/ruby-2.1.3/gems/less-rails-bootstrap-3.2.0/app/assets/fonts" - "/Users/Jorge/.rvm/gems/ruby-2.1.3/gems/less-rails-bootstrap-3.2.0/app/assets/javascripts" - "/Users/Jorge/.rvm/gems/ruby-2.1.3/gems/less-rails-bootstrap-3.2.0/app/assets/stylesheets" - "/Users/Jorge/.rvm/gems/ruby-2.1.3/gems/turbolinks-2.2.2/lib/assets/javascripts" - "/Users/Jorge/.rvm/gems/ruby-2.1.3/gems/jquery-rails-3.1.1/vendor/assets/javascripts" - "/Users/Jorge/.rvm/gems/ruby-2.1.3/gems/coffee-rails-4.0.1/lib/assets/javascripts"
30. Adding to the Search Path
31. Add this line to the config/initializers/assets.rb Rails.application.config.assets.paths << Rails.root.join("app", "flash", "assets")
32. create a flashy.txt file $ touch app/flash/assets/flashy.txt
33. put this into flashy.txt Rockin’ like 2002
34. visit this path http://localhost:3000/assets/flashy.txt
35. Workshop
36. 1. Create an additional path. 2. Add a file with a txt extension. 3. Put some content in it. 4. Can you find the file with your browser and display its contents?
37. Manifests
38. What are manifests?
39. Let’s look at the application.js
40. • // require_tree • // require_directory . • Define the files manually
41. //= require jquery //= require jquery_ujs //= require twitter/bootstrap //= require turbolinks //= require_tree .
42. Manifest Directives
43. • require • include • require_self • require_directory • require_tree • depend_on • stub
44. A quick note on SASS / SCSS
45. Use @import instead of require
46. ActionView Helpers
47. <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %>
48. audio_path("horse.wav") # /audios/horse.wav audio_tag("sound") # <audio src="/audios/sound"/> font_path("font.ttf") # /fonts/font.ttf image_path("edit.png") # "/images/edit.png" image_tag("dog.png") # <img src="/images/dog.png" alt="Dog"/> video_path("hd.avi") # /videos/hd.avi video_tag("trailer.ogg") # <video src="/videos/trailer.ogg"/>
49. Development vs. Production
50. Eliminate all of your production whoas with this ONE EASY TRICK
51. Debugging Assets
52. Open config/environments/development.rb config.assets.debug = true
53. Precompiling Assets
54. Your assets have to be either required in your asset pipeline or precompiled
55. In app/assets/stylesheets/application.css // = require_self // = require 'site'
56. In config/initializers/assets.rb config.assets.precompile += %w( site.css )
57. What happens when we precompile?
58. 1. Rails copies all the assets into 
 public/assets 2. Rails then creates an application.js and application.css by reading the manifests 3. When using config.assets.precompile,
 the file extension matters.
59. Recap
60. 1. What is the asset pipeline 2. Asset organization 3. Asset lookup 4. Manifests 5. ActionView helpers 6. Development vs. production