Painless Node.js Asset Management with Connect-Assets @ Nodevember

connect-assets is a transparent asset management package for node.js: it compiles, concatenates, minifies, and fingerprints your JavaScript, CSS, fonts, images, and the like to ensure that your site always looks its best, even when you deploy updates to cached files.

As the maintainer of the package, I’ll give a bit of history on the module and talk about why you’d want to use connect-assets in your next web application. We’ll go through the basics of properly serving assets, write (live-code?!) an Express application using connect-assets, and make sure you leave with your questions answered.

Transcript

1. connect-assets @adunkman Painless Asset Management with
2. ndrew A Dunkman
3. ADunkman twitter.com / github.com /
4. ADunkman twitter github Harvest
5. ADunkman twitter github Harvest Maintainer connect- assets
6. Agenda
7. Agenda Background and History
8. Agenda Background and History Demo connect-assets
9. Agenda Background and History Demo connect-assets Possible Configuration
10. Agenda Time for Answers Background and History Demo connect-assets Possible Configuration
11. Time for Answers Background and History Demo connect-assets Possible Configuration
12. Asset
13. Compile Combine Minify Fingerprint Serve
14. fingerprint
15. fingerprint Why ?
16. clear your cache
17. “ ” clear your cache Every time you say your process is broken.
18. Sprockets
19. rails asset pipeline
20. asset pipeline
21. asset pipeline August 31, 2011
22. asset pipeline August 31, 2011 August 30, 2011
23. lets go!
24. Time for Answers Background and History Demo connect-assets Possible Configuration
25. Time for Answers Background and History Demo connect-assets Possible Configuration
26. var express = require("express"); var app = express(); app.listen(3000);
27. var express = require("express"); var app = express(); app.listen(3000); app.use(require("connect-assets")());
28. Demo
29. Time for Answers Background and History Demo connect-assets Possible Configuration
30. Time for Answers Background and History Demo connect-assets Possible Configuration
31. Directives
32. //= include shared-variables Directives
33. //= include shared-variables //= require jquery Directives
34. //= include shared-variables //= require jquery //= require_tree views Directives
35. //= include shared-variables //= require jquery //= require_tree views //= require_directory templates Directives
36. //= include shared-variables //= require jquery //= require_tree views //= require_directory templates //= require_self Directives
37. //= require closure-start Directives //= require closure-end var secrets = function () { do_super_secret_stuff(); }; //= require_self
38. Directives (function () { //= require closure-end var secrets = function () { do_super_secret_stuff(); }; //= require_self
39. Directives (function () { //= require closure-end var secrets = function () { do_super_secret_stuff(); }; //
40. Directives (function () { var secrets = function () { do_super_secret_stuff(); }; // })();
41. app.use(require(“connect-assets”)({ })); Configuration
42. app.use(require(“connect-assets”)({ })); Configuration paths: [“assets/js”, “assets/css”]
43. app.use(require(“connect-assets”)({ })); Configuration helperContext: global paths: [“assets/js”, “assets/css”] ,
44. Stylus .css.styl stylus LESS .css.less less SASS .css.sass node-sass Language Extension NPM Package
45. CoffeeScript .js.coffee coffee-script Coco .js.co coco Language Extension NPM Package
46. Haml-Coffee .jst.hamlc haml-coffee Handlebars .jst.hbs handlebars Jade .jst.jade jade Language Extension NPM Package
47. EJS .*.ejs ejs ECO .*.eco eco Language Extension NPM Package
48. 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
49. Why should you use connect-assets?
50. Why should you use connect-assets? Your assets should leverage HTTP caching as much as possible.
51. 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.
52. 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.
53. 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.
54. 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)
55. 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)
56. 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)
57. Time for Answers Background and History Demo connect-assets Possible Configuration
58. Time for Answers Background and History Demo connect-assets Possible Configuration
59. Thank you! ADunkman twitter.com / github.com /