Slide 1
Slide 1 text
connect-assets
@adunkman
Painless Asset Management with
Slide 2
Slide 2 text
ndrew
A Dunkman
Slide 3
Slide 3 text
ADunkman
twitter.com /
github.com /
Slide 4
Slide 4 text
ADunkman
twitter
github
Harvest
Slide 5
Slide 5 text
ADunkman
twitter
github
Harvest
Maintainer connect-
assets
Slide 6
Slide 6 text
Agenda
Slide 7
Slide 7 text
Agenda
Background and History
Slide 8
Slide 8 text
Agenda
Background and History
Demo connect-assets
Slide 9
Slide 9 text
Agenda
Background and History
Demo connect-assets
Possible Configuration
Slide 10
Slide 10 text
Agenda
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 11
Slide 11 text
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 12
Slide 12 text
Asset
Slide 13
Slide 13 text
Compile
Combine
Minify
Fingerprint
Serve
Slide 14
Slide 14 text
fingerprint
Slide 15
Slide 15 text
fingerprint
Why
?
Slide 16
Slide 16 text
clear your cache
Slide 17
Slide 17 text
“ ”
clear your cache
Every time you say
your process is broken.
Slide 18
Slide 18 text
Sprockets
Slide 19
Slide 19 text
rails
asset pipeline
Slide 20
Slide 20 text
asset pipeline
Slide 21
Slide 21 text
asset pipeline
August 31, 2011
Slide 22
Slide 22 text
asset pipeline
August 31, 2011
August 30, 2011
Slide 23
Slide 23 text
lets go!
Slide 24
Slide 24 text
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 25
Slide 25 text
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 26
Slide 26 text
var express = require("express");
var app = express();
app.listen(3000);
Slide 27
Slide 27 text
var express = require("express");
var app = express();
app.listen(3000);
app.use(require("connect-assets")());
Slide 28
Slide 28 text
Demo
Slide 29
Slide 29 text
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 30
Slide 30 text
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 31
Slide 31 text
Directives
Slide 32
Slide 32 text
//= include shared-variables
Directives
Slide 33
Slide 33 text
//= include shared-variables
//= require jquery
Directives
Slide 34
Slide 34 text
//= include shared-variables
//= require jquery
//= require_tree views
Directives
Slide 35
Slide 35 text
//= include shared-variables
//= require jquery
//= require_tree views
//= require_directory templates
Directives
Slide 36
Slide 36 text
//= include shared-variables
//= require jquery
//= require_tree views
//= require_directory templates
//= require_self
Directives
Slide 37
Slide 37 text
//= require closure-start
Directives
//= require closure-end
var secrets = function () {
do_super_secret_stuff();
};
//= require_self
Slide 38
Slide 38 text
Directives
(function () {
//= require closure-end
var secrets = function () {
do_super_secret_stuff();
};
//= require_self
Slide 39
Slide 39 text
Directives
(function () {
//= require closure-end
var secrets = function () {
do_super_secret_stuff();
};
//
Slide 40
Slide 40 text
Directives
(function () {
var secrets = function () {
do_super_secret_stuff();
};
//
})();
Slide 41
Slide 41 text
app.use(require(“connect-assets”)({
}));
Configuration
Slide 42
Slide 42 text
app.use(require(“connect-assets”)({
}));
Configuration
paths: [“assets/js”, “assets/css”]
Slide 43
Slide 43 text
app.use(require(“connect-assets”)({
}));
Configuration
helperContext: global
paths: [“assets/js”, “assets/css”] ,
Slide 44
Slide 44 text
Stylus .css.styl stylus
LESS .css.less less
SASS .css.sass node-sass
Language Extension NPM Package
Slide 45
Slide 45 text
CoffeeScript .js.coffee coffee-script
Coco .js.co coco
Language Extension NPM Package
Slide 46
Slide 46 text
Haml-Coffee .jst.hamlc haml-coffee
Handlebars .jst.hbs handlebars
Jade .jst.jade jade
Language Extension NPM Package
Slide 47
Slide 47 text
EJS .*.ejs ejs
ECO .*.eco eco
Language Extension NPM Package
Slide 48
Slide 48 text
EJS .*.ejs ejs
ECO .*.eco eco
Language Extension NPM Package
Stylus .css.styl stylus
LESS .css.less less
SASS .css.sass node-sass
CoffeeScript .js.coffee coffee-script
Coco .js.co coco
Haml-Coffee .jst.hamlc haml-coffee
Handlebars .jst.hbs handlebars
Jade .jst.jade jade
.*.ejs ejs
eco
Slide 49
Slide 49 text
Why should you use connect-assets?
Slide 50
Slide 50 text
Why should you use connect-assets?
Your assets should leverage HTTP
caching as much as possible.
Slide 51
Slide 51 text
Why should you use connect-assets?
Your assets should leverage HTTP
caching as much as possible.
You shouldn’t need to clear
browser caches, ever.
Slide 52
Slide 52 text
Why should you use connect-assets?
Your assets should leverage HTTP
caching as much as possible.
You shouldn’t need to clear
browser caches, ever.
Your assets should be
easy to debug in development.
Slide 53
Slide 53 text
Why should you use connect-assets?
Your assets should leverage HTTP
caching as much as possible.
You shouldn’t need to clear
browser caches, ever.
Your assets should be
easy to debug in development.
You should optimize HTTP requests
and file size in production.
Slide 54
Slide 54 text
Why should you use connect-assets?
Your assets should leverage HTTP
caching as much as possible.
You shouldn’t need to clear
browser caches, ever.
Your assets should be
easy to debug in development.
You should optimize HTTP requests
and file size in production.
You should be able to use
the best language for the job.
(SASS, Less, Stylus, CoffeeScript, etc)
Slide 55
Slide 55 text
Choosing a language that compiles to
CSS or JavaScript shouldn’t introduce
extra build/development steps.
Why should you use connect-assets?
Your assets should leverage HTTP
caching as much as possible.
You shouldn’t need to clear
browser caches, ever.
Your assets should be
easy to debug in development.
You should optimize HTTP requests
and file size in production.
You should be able to use
the best language for the job.
(SASS, Less, Stylus, CoffeeScript, etc)
Slide 56
Slide 56 text
Choosing a language that compiles to
CSS or JavaScript shouldn’t introduce
extra build/development steps.
You shouldn’t need to write
any code to do all of this.
Why should you use connect-assets?
Your assets should leverage HTTP
caching as much as possible.
You shouldn’t need to clear
browser caches, ever.
Your assets should be
easy to debug in development.
You should optimize HTTP requests
and file size in production.
You should be able to use
the best language for the job.
(SASS, Less, Stylus, CoffeeScript, etc)
Slide 57
Slide 57 text
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 58
Slide 58 text
Time for Answers
Background and History
Demo connect-assets
Possible Configuration
Slide 59
Slide 59 text
Thank you!
ADunkman
twitter.com /
github.com /