Secrets of the asset pipeline

Secrets Of The Asset Pipeline

Ken Collinsmetaskills.net

Sunday, December 18, 11

The FoundationWhat makes the asset pipeline possible.

HikeHike is a Ruby library for

!nding !les in a set of paths. Use it to implement search

paths, load paths, and the like.

Find Ruby Files In Your Project

trail = Hike::Trail.new "/Users/sam/Projects/hike"trail.append_extension ".rb"trail.append_paths "lib", "test"

trail.find "hike/trail"# => "/Users/sam/Projects/hike/lib/hike/trail.rb"

trail.find "test_trail"# => "/Users/sam/Projects/hike/test/test_trail.rb"

Explore Your Shell Path

trail = Hike::Trail.new "/"trail.append_paths *ENV["PATH"].split(":")

trail.find "ls"# => "/bin/ls"

trail.find "gem"# => "/Users/sam/.rvm/rubies/ree/bin/gem"

Digging Deeper# Fallback logical paths. Equivalent.trail.find "hike", "hike/index"trail.find("hike") || trail.find("hike/index")

# Block yields multiple matches.trail.find("application") do |path| return path if mime_type_for(path) == "text/css"end

# Like Dir#entries. Filters "." and "~" swap files.trail.entries('/usr/local/bin')

# Like File.stat.trail.stat('/usr/local/bin')

# Cached trail. Avoids excess system calls.trail.index

TiltTilt is a thin interface over a bunch of

different Ruby template engines in an attempt to make their usage as generic possible. is is

useful for web frameworks, static site generators, and other systems that support

multiple template engines but don't want to code for each of them individually.

Common Features

Common FeaturesCustom template evaluation scopes / bindings.

Common FeaturesCustom template evaluation scopes / bindings.Ability to pass locals to template evaluation.

Common FeaturesCustom template evaluation scopes / bindings.Ability to pass locals to template evaluation.Support for passing a block to template eval for "yield".

Common FeaturesCustom template evaluation scopes / bindings.Ability to pass locals to template evaluation.Support for passing a block to template eval for "yield".Backtraces with correct filenames and line numbers.

Common FeaturesCustom template evaluation scopes / bindings.Ability to pass locals to template evaluation.Support for passing a block to template eval for "yield".Backtraces with correct filenames and line numbers.Template file caching and reloading.

Common FeaturesCustom template evaluation scopes / bindings.Ability to pass locals to template evaluation.Support for passing a block to template eval for "yield".Backtraces with correct filenames and line numbers.Template file caching and reloading.Fast, method-based template source compilation.

Engine File Extension Required Lib.ERB .erb, .rhtml none (stdlib)

Interpolated String .str none (core)

Erubis .erb, .rhtml, .erubis erubis

Haml .haml haml

Sass .sass sass (>= 3.1)

Scss .scss sass (>= 3.1)

Less CSS .less less

Builder .builder builder

Liquid .liquid liquid

RDiscount .markdown, .mkd, .md rdiscount

Redcarpet .markdown, .mkd, .md redcarpet

BlueCloth .markdown, .mkd, .md bluecloth

Kramdown .markdown, .mkd, .md kramdown

Maruku .markdown, .mkd, .md maruku

RedCloth .textile redcloth

RDoc .rdoc rdoc

Radius .radius radius

Markaby .mab markaby

Nokogiri .nokogiri nokogiri

CoffeeScript .coffee coffee-script (+javascript)

Creole (Wiki markup) .wiki, .creole creole

WikiCloth (Wiki markup) .wiki, .mediawiki, .mw wikicloth

Yajl .yajl yajl-ruby

Engine File Extension Required Lib.ERB .erb, .rhtml none (stdlib)

Interpolated String .str none (core)

Erubis .erb, .rhtml, .erubis erubis

Haml .haml haml

Sass .sass sass (>= 3.1)

Scss .scss sass (>= 3.1)

Less CSS .less less

Builder .builder builder

Liquid .liquid liquid

RDiscount .markdown, .mkd, .md rdiscount

Redcarpet .markdown, .mkd, .md redcarpet

BlueCloth .markdown, .mkd, .md bluecloth

Kramdown .markdown, .mkd, .md kramdown

Maruku .markdown, .mkd, .md maruku

RedCloth .textile redcloth

RDoc .rdoc rdoc

Radius .radius radius

Markaby .mab markaby

Nokogiri .nokogiri nokogiri

CoffeeScript .coffee coffee-script (+javascript)

Creole (Wiki markup) .wiki, .creole creole

WikiCloth (Wiki markup) .wiki, .mediawiki, .mw wikicloth

Yajl .yajl yajl-ruby

Really Simple!

require 'erb'require 'tilt'

template = Tilt.new('templates/foo.erb') #<Tilt::ERBTemplate @file="templates/foo.rb"...>

template.render # => "Hello world!"

Evaluation Scope

template = Tilt::ERBTemplate.new('templates/foo.erb')joe = Person.find('joe')output = template.render(joe, :x => 35, :y => 42)

jane = Person.find('jane')output = template.render(jane, :x => 22, :y => nil)

Sprockets

SprocketsRack-based asset packaging for compiling

and serving web assets. It features declarative dependency management for

JavaScript and CSS assets, as well as a powerful preprocessor pipeline that allows

you to write assets in languages like CoffeeScript, Sass, SCSS and LESS.

Rack Application# In config.ru

require 'sprockets'

map '/assets' do environment = Sprockets::Environment.new environment.append_path 'app/assets/javascripts' environment.append_path 'app/assets/stylesheets' run environmentend

map '/' do run YourRackAppend

Renders Templates

/* Multi-line comment blocks (CSS, SCSS, JavaScript) *= require foo */

// Single-line comment blocks (SCSS, JavaScript)//= require foo

# Single-line comment blocks (CoffeeScript)#= require foo

modal.css.scss.erb

Best PracticesHow to wire it up right!

Dir. Structure $ tree app/assets |!"" images# !"" app# # !"" ...# $"" site# $"" ...!"" javascripts# !"" application.js# | $"" ...# !"" shared# # !"" base.js.coffee# # !"" modal.js.coffee.erb# # $"" ...# !"" site| | !"" base.js.coffee# | !"" flash.js.coffee# | $"" ...| $"" site.js$"" stylesheets !"" application # $"" application.css.scss !"" application.css !"" shared # !"" base.scss # !"" modal.css.scss # $"" ... !"" site # !"" 960.css # $"" site.css.scss $"" site.css

Directory Namespaces

Directory NamespacesManifest Only Top Files

Directory NamespacesManifest Only Top Files Generators Garbage

Directory NamespacesManifest Only Top Files Generators GarbageRequire Tree Bad

Directory NamespacesManifest Only Top Files Generators GarbageRequire Tree BadTry To Match With Layout Names

site.js

//= require jquery-1.6.2.min//= require jquery-ui-1.8.12.ui-darkness.min//= require jquery_ujs//= require shared/base//= require shared/utils//= require shared/modal//= require shared/spinner//= require site/quickie//= require site/flash//= require site/site

site.css

/* *= require application/application *= require shared/modal *= require shared/utility*/

Precompile Additional Assets!

# Precompile additional assets # (application.js, application.css, # and all non-JS/CSS are already added)config.assets.precompile += ['site.js', 'site.css']

config/production.rb

Sub Files @import’ed

Sub Files @import’edBase Files Are Your Compass

Base Files Are Your Compass

$legacy-support-for-ie: false;$experimental-support-for-opera: false;$experimental-support-for-khtml: false;@import "compass";@import "compass/layout";

app/assets/stylesheets/shared/base.scss

/* *= depend_on shared/base.scss */@import "shared/base";

app/assets/stylesheets/shared/modal.scss

Advanced UsageSecrets of the asset pipeline.

Hooking Into SprocketsRails.application.assets# => #<Sprockets::Environment:0x3fda9a195f8c root="/Repos/homemarks_app", paths=["/Repos/homemarks_app/app/assets/images", "/Repos/homemarks_app/app/assets/javascripts", "/Repos/homemarks_app/app/assets/stylesheets", "/Repos/homemarks_app/vendor/assets/javascripts", "/Repos/homemarks_app/vendor/assets/stylesheets", "/Users/ken/.rbenv/versions/1.9.3/lib/ruby/gems/1.9.1/gems/jquery-rails-1.0.13/vendor/assets/javascripts"], digest="46dde6621c301f4928e3b34efee9e3b5">

Or use the `asset_environment` helper.

Finding Assets

Rails.application.assets['shared/modal']# => #<Sprockets::BundledAsset:0x3fcd7e90c6cc pathname="/Repos/homemarks_app/app/assets/javascripts/shared/modal.js.coffee.erb", mtime=2011-11-25 17:41:11 -0500, digest="775822db3e101bf38d7978627380e62b">

#find_asset method (aliased as [])

* Advanced Usage - Where is sprockets. > Rails.application.assets (helpers can use asset_environment) - Finding Assets. #find_asset method (aliased as []) Rails.application.assets['shared/modal'] # => Sprockets::BundledAsset Call to_s on the resulting asset to access its contents, length to get its length in bytes, mtime to query its last-modified time, and pathname to get its full path on the filesystem. - Asset Helpers. - image, asset-data-uri, etc. Move all images to app/assets!!! Rails.application.assets['site/hmlogo.png'] # => #<Sprockets::StaticAsset:0x3fda99465d08 pathname="/Users/kencollins/Repositories/homemarks_app/app/assets/images/site/hmlogo.png", mtime=2011-11-16 19:31:44 -0500, digest="eed9e6f3fd9fa546ccd7ce49edd99f49"> - Custom SASS - Preprocessors. - Assets in other assets. - Precompiling. Fingerprints. When they are used. - JavaScript Templating with EJS and Eco (read sprockets page) - JST (define) - EJS or Eco - CSS Compressors (:uglifier default, but use :yui for both css/js) group :assets do # ... gem 'yui-compressor', :require => 'yui/compressor' end - Your config/application.rb if defined?(Bundler) # If you precompile assets before deploying to production, use this line Bundler.require *Rails.groups(:assets => %w(development test)) # If you want your assets lazily compiled in production, use this line # Bundler.require(:default, :assets, Rails.env) end

* CSS Frameworks. - Less - Stylus - Sass - http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive - http://github.com/kuroir/SCSS.tmbundle - Compass - mate "$(bundle show compass)/frameworks/compass/stylesheets"

Incomplete Notes

Thanks!Ken Collins

metaskills.net

Secrets of the asset pipeline

Technology

TURN-KEY PIPELINE LIFE-CYCLE ASSET INTEGRITY MANAGEMENT€¦ · TURN-KEY PIPELINE LIFE-CYCLE ASSET INTEGRITY MANAGEMENT Investors and operators alike are recognizing the need to have

Keeping Secrets: GKE with Hashicorp Vault · accessing secrets. Vault has platform specific integrations to asset client identity ... external IP address from Google Cloud. 02Demo

Inter Pipeline Asset Management & Reliability Program with

Secrets to Business Growth · business model. Revenue and pipeline growth: We monitor the amount of incoming leads, our monthly pipeline, and of course revenue numbers. At the end

North American oil refining and pipeline corporation ... · North American oil refining and pipeline corporation transforms enterprise, engineering and asset information management

5-Secrets-Build-Your-Sales-Pipeline and Keep it Growing

Asset beta for gas pipeline businesses - Commerce Commission€¦ · Asset beta for gas pipeline businesses Introduction HoustonKemp.com 1 1. Introduction The Commerce Commission

August 2019 Infrastructure Tasmania Project Pipeline › __data › assets › pdf...Analysis of Pipeline trends Timing of spend by asset class The forecast ten year expenditure for

3. Pixel-Lab / Games:EDU / Chris Wells / Epic Games Art Asset Pipeline

5 secrets-build-your-sales-pipeline

INNOVATION IN PIPELINE ASSET MANAGEMENT€¦ · INNOVATION IN PIPELINE ASSET MANAGEMENT Sarah Seel, Sandy Muir and Russell Fox Maunsell Australia Pty Ltd and Hobart Water Abstract

Subsea Pipeline Design Automation...Pipeline design automation 15 A presentation by Wood. Database Geospatial data Design data Asset data 3D models Documents Tags Automated GIS toolkit

Crude Pipeline Asset Integrity Congress 2014

How to replace rails asset pipeline with webpack?

Unlocking the "Secrets" of Volunteerism Filling Your State Pipeline with Leaders, Loyalty and Lifelong Members Presented by Stuart Meyer Marketing, Membership

Trade Secrets and Cybersecurity: Protecting Intellectual ...media.straffordpub.com/products/trade-secrets-and...Sep 24, 2015 · TRADE SECRET ASSET MANAGEMENT •TRADE SECRET?? •What

Buildings Don't Write Checks: Sales Pipeline & Demand Secrets for Professional Services Firms

A FOREST’S SECRETS A forest has many secrets—secrets that man has long forgotten. A forest has healing secrets, treasure secrets, and history secrets

2. Pixel-Lab / Games:EDU / Chris Wells / Epic Games' Art Asset Pipeline

Asset Integrity Management Pipeline Integrity …Pipeline Integrity Management offering; Coabis for inspection and integrity management, Integri-Tech for fitness-for-service & lifetime