Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Turing School - Understanding the Asset Pipeline
Search
Turing School
April 11, 2017
Programming
0
43
Turing School - Understanding the Asset Pipeline
Rails Asset Pipeline Lesson Slides
Turing School
April 11, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
900
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
120
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Site Reliability Engineering for GMO
pyama86
6
940
Featured
See All Featured
How GitHub (no longer) Works
holman
304
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Teambox: Starting and Learning
jrom
128
8.4k
Docker and Python
trallard
33
2.7k
Thoughts on Productivity
jonyablonski
57
3.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Code Reviewing Like a Champion
maltzj
513
39k
Transcript
Understanding the Asset Pipeline It cannot be understood
1. What is the asset pipeline 2. Asset organization 3.
Asset lookup 4. Manifests 5. ActionView helpers 6. Development vs. production
The Asset Pipeline
What is the Asset Pipeline?
Main Features
1. Asset concatenation 2. Asset minification 3. Precompilation
What is fingerprinting?
global.css global-908e25f4bf641868d8683022a5b62f54.css
global.css /stylesheets/global.css?1309495796
Asset Organization
Assets Locations
1. app/assets 2. lib/assets 3. vendor/assets
Asset directories are arbitrary
app/assets/javascripts/home.js lib/assets/javascripts/moovinator.js vendor/assets/tino_cochino/slider.js vendor/assets/barbie_hair/phonebox.js
http://localhost:3000/assets/home.js http://localhost:3000/assets/moovinator.js http://localhost:3000/assets/slider.js http://localhost:3000/assets/phonebox.js
Workshop
Clone Storedom $ git clone https://github.com/turingschool- examples/storedom.git asset_pipeline
bundle & setup the database $ bundle && rake db:setup
create a texts directory $ mkdir app/assets/texts
create a hello.txt file $ touch app/assets/texts/hello.txt
start the server and visit this path http://localhost:3000/assets/hello.txt
move the hello.txt file to the javascripts folder $
mv app/assets/{texts,javascripts}/ hello.txt
visit / reload this path again http://localhost:3000/assets/hello.txt
create a hello.js file $ touch app/assets/stylesheets/hello.js
put this into hello.js Hello, is it me you are
looking for?
visit this path http://localhost:3000/assets/hello.js
Asset Lookup
Enter this in the rails console > y Rails.application.config.assets.paths
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"
Adding to the Search Path
Add this line to the config/initializers/assets.rb Rails.application.config.assets.paths << Rails.root.join("app", "flash",
"assets")
create a flashy.txt file $ touch app/flash/assets/flashy.txt
put this into flashy.txt Rockin’ like 2002
visit this path http://localhost:3000/assets/flashy.txt
Workshop
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?
Manifests
What are manifests?
Let’s look at the application.js
• // require_tree • // require_directory . • Define the
files manually
//= require jquery //= require jquery_ujs //= require twitter/bootstrap //=
require turbolinks //= require_tree .
Manifest Directives
• require • include • require_self • require_directory • require_tree
• depend_on • stub
A quick note on SASS / SCSS
Use @import instead of require
ActionView Helpers
<%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application"
%>
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"/>
Development vs. Production
Eliminate all of your production whoas with this ONE EASY
TRICK
Debugging Assets
Open config/environments/development.rb config.assets.debug = true
Precompiling Assets
Your assets have to be either required in your asset
pipeline or precompiled
In app/assets/stylesheets/application.css // = require_self // = require 'site'
In config/initializers/assets.rb config.assets.precompile += %w( site.css )
What happens when we precompile?
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.
Recap
1. What is the asset pipeline 2. Asset organization 3.
Asset lookup 4. Manifests 5. ActionView helpers 6. Development vs. production