SlideShare una empresa de Scribd logo
1 de 20
RAILS ASSET PIPELINE
BY STEVE BUTTERWORTH
Asset pipeline
THE PROBLEM
OLD SKOOL
CONFIG/ENVIRONMENTS/PRODUCTION.RB




APP/VIEWS/LAYOUTS/APPLICATION.HTML.HAML




RESULTS IN...
JUST AIN’T GOOD ENOUGH

NO MINIMIFICATION

INACCURATE CACHE STAMP

NO ORGANIZATION
Asset pipeline
NU SKOOL

APP/ASSETS IS YOUR NEW HOME FOR CSS AND JS

EACH CONTROLLER HAS ITS OWN CSS AND JS FILE

PRE-PROCESS JS WITH ERB OR COFFEE-SCRIPT

PRE-PROCESS CSS WITH SASS, LESS OR ERB
PRO-PROCESSING

PRE-PROCESSOR DETERMINED BY FILE EXTENSION




CHAIN PRE-PROCESSORS
Asset pipeline
PRE-PROCESS CSS WITH SASS

SCSS SYNTAX   GENERATED CSS
AS SIMPLE AS .... (ALMOST)

YOU CAN USE THE SAME TAG HELPERS
Asset pipeline
MANIFESTS
SPROCKETS MANIFEST APP/ASSETS/STYLESHEETS/APPLICATION.CSS 




WHEN ORDER MATTERS
DEBUGGING ASSETS

http://localhost.....




http://localhost.....?debug_assets=true
CACHING

- File includes MD5 hash of compiled content
- 1 year max-age on cache-control header


action_controller.perform_caching = true
Asset pipeline
COMPILE OFFLINE
SQUEEZE IT, SQUEEZE IT MORE

  COMPRESS STYLESHEETS (SCSS IS ONLY OPTION)




  COMPRESS JAVASCRIPT (UGLIFIER, YUI, CLOSURE)
Asset pipeline
RESOURCES

HTTP://RAILSCASTS.COM/EPISODES/265-RAILS-3-1-OVERVIEW

HTTP://WWW.YOUTUBE.COM/WATCH?V=CGDCI2HHFAU

HTTP://GETSPROCKETS.ORG/

HTTP://RYANBIGG.COM/GUIDES/ASSET_PIPELINE.HTML

Más contenido relacionado

Destacado

Top 8 maths teacher resume samples
Top 8 maths teacher resume samplesTop 8 maths teacher resume samples
Top 8 maths teacher resume samplesfernandotores132
 
eldorado reference letter
eldorado reference lettereldorado reference letter
eldorado reference letterBettina Dorrek
 
Permen PU 30 tahun 2006
Permen PU 30 tahun 2006Permen PU 30 tahun 2006
Permen PU 30 tahun 2006Fery Kurniadi
 
160216 Presentatie digitale dienstverlening 16 februari 2016
160216 Presentatie digitale dienstverlening 16 februari 2016160216 Presentatie digitale dienstverlening 16 februari 2016
160216 Presentatie digitale dienstverlening 16 februari 2016KING
 
Netwerkbijeenkomst monitor 1 dec gemeente_rotterdam
Netwerkbijeenkomst monitor 1 dec gemeente_rotterdamNetwerkbijeenkomst monitor 1 dec gemeente_rotterdam
Netwerkbijeenkomst monitor 1 dec gemeente_rotterdamKING
 

Destacado (16)

Top 8 maths teacher resume samples
Top 8 maths teacher resume samplesTop 8 maths teacher resume samples
Top 8 maths teacher resume samples
 
Pratica e cultura 9. Tv e bambini
Pratica e cultura 9. Tv e bambiniPratica e cultura 9. Tv e bambini
Pratica e cultura 9. Tv e bambini
 
Il web tra contenuti e usi sociali 2. I motori di ricerca e la google generation
Il web tra contenuti e usi sociali 2. I motori di ricerca e la google generationIl web tra contenuti e usi sociali 2. I motori di ricerca e la google generation
Il web tra contenuti e usi sociali 2. I motori di ricerca e la google generation
 
Bryan Dexter presents “Universal Waste Recycling.”
Bryan Dexter presents “Universal Waste Recycling.”Bryan Dexter presents “Universal Waste Recycling.”
Bryan Dexter presents “Universal Waste Recycling.”
 
Teoria e analisi del cinema 4. allen and his audience bailey the reluctant ...
Teoria e analisi del cinema 4. allen and his audience   bailey the reluctant ...Teoria e analisi del cinema 4. allen and his audience   bailey the reluctant ...
Teoria e analisi del cinema 4. allen and his audience bailey the reluctant ...
 
Utopie concrete
Utopie concreteUtopie concrete
Utopie concrete
 
CONTEÚDO
CONTEÚDOCONTEÚDO
CONTEÚDO
 
eldorado reference letter
eldorado reference lettereldorado reference letter
eldorado reference letter
 
2. I social network nella didattica
2. I social network nella didattica2. I social network nella didattica
2. I social network nella didattica
 
Extended essay intro
Extended essay introExtended essay intro
Extended essay intro
 
Komunikasi sosial
Komunikasi sosialKomunikasi sosial
Komunikasi sosial
 
Semiotica industrial design 5. La narrazione
Semiotica industrial design   5. La narrazioneSemiotica industrial design   5. La narrazione
Semiotica industrial design 5. La narrazione
 
02. pkp sosnas nsup - Kota Tanpa Kumuh - KOTAKU
02. pkp sosnas nsup - Kota Tanpa Kumuh - KOTAKU02. pkp sosnas nsup - Kota Tanpa Kumuh - KOTAKU
02. pkp sosnas nsup - Kota Tanpa Kumuh - KOTAKU
 
Permen PU 30 tahun 2006
Permen PU 30 tahun 2006Permen PU 30 tahun 2006
Permen PU 30 tahun 2006
 
160216 Presentatie digitale dienstverlening 16 februari 2016
160216 Presentatie digitale dienstverlening 16 februari 2016160216 Presentatie digitale dienstverlening 16 februari 2016
160216 Presentatie digitale dienstverlening 16 februari 2016
 
Netwerkbijeenkomst monitor 1 dec gemeente_rotterdam
Netwerkbijeenkomst monitor 1 dec gemeente_rotterdamNetwerkbijeenkomst monitor 1 dec gemeente_rotterdam
Netwerkbijeenkomst monitor 1 dec gemeente_rotterdam
 

Similar a Asset pipeline

SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best PracticesHolger Bartel
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
Jazoon2010 - Edgar Silva - Open source SOA on Steroids
Jazoon2010 - Edgar Silva - Open source SOA on SteroidsJazoon2010 - Edgar Silva - Open source SOA on Steroids
Jazoon2010 - Edgar Silva - Open source SOA on SteroidsEdgar Silva
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet LanguagesAndrea Tino
 
CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具 CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具 裕欽 林
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozókMáté Farkas
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
Getting SASSy with front end development
Getting SASSy with front end developmentGetting SASSy with front end development
Getting SASSy with front end developmentMatthew Carleton
 
@Agawish creating a stunning ui with oracle adf faces, using sass
@Agawish   creating a stunning ui with oracle adf faces, using sass@Agawish   creating a stunning ui with oracle adf faces, using sass
@Agawish creating a stunning ui with oracle adf faces, using sassAmr Gawish
 

Similar a Asset pipeline (20)

SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
SASS Preprocessor
SASS PreprocessorSASS Preprocessor
SASS Preprocessor
 
Less vs sass
Less vs sassLess vs sass
Less vs sass
 
Brunch With Coffee
Brunch With CoffeeBrunch With Coffee
Brunch With Coffee
 
Jazoon2010 - Edgar Silva - Open source SOA on Steroids
Jazoon2010 - Edgar Silva - Open source SOA on SteroidsJazoon2010 - Edgar Silva - Open source SOA on Steroids
Jazoon2010 - Edgar Silva - Open source SOA on Steroids
 
Big Frontends Made Simple
Big Frontends Made SimpleBig Frontends Made Simple
Big Frontends Made Simple
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
 
LESS vs. SASS
LESS vs. SASSLESS vs. SASS
LESS vs. SASS
 
CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具 CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Getting SASSy with front end development
Getting SASSy with front end developmentGetting SASSy with front end development
Getting SASSy with front end development
 
@Agawish creating a stunning ui with oracle adf faces, using sass
@Agawish   creating a stunning ui with oracle adf faces, using sass@Agawish   creating a stunning ui with oracle adf faces, using sass
@Agawish creating a stunning ui with oracle adf faces, using sass
 

Último

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 

Último (20)

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 

Notas del editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n