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

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.

2e055eb589fb86174fd268748b0fcd30?s=128

Andrew Dunkman

November 15, 2014
Tweet

Transcript

  1. 6.
  2. 12.
  3. 18.
  4. 23.
  5. 28.
  6. 36.

    //= include shared-variables //= require jquery //= require_tree views //=

    require_directory templates //= require_self Directives
  7. 37.

    //= require closure-start Directives //= require closure-end var secrets =

    function () { do_super_secret_stuff(); }; //= require_self
  8. 38.

    Directives (function () { //= require closure-end var secrets =

    function () { do_super_secret_stuff(); }; //= require_self
  9. 39.

    Directives (function () { //= require closure-end var secrets =

    function () { do_super_secret_stuff(); }; //
  10. 40.

    Directives (function () { var secrets = function () {

    do_super_secret_stuff(); }; // })();
  11. 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
  12. 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.
  13. 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.
  14. 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.
  15. 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)
  16. 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)
  17. 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)