Painless asset management with connect-assets @ Kansas City Developer Conference

Painless asset management with connect-assets @ Kansas City Developer Conference

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 something like connect-assets. We’ll go through the basics of properly serving assets and write (live-code?!) an Express application using connect-assets.

2e055eb589fb86174fd268748b0fcd30?s=128

Andrew Dunkman

May 16, 2014
Tweet

Transcript

  1. ! connect-assets @adunkman Painless Asset Management with

  2. Titanium Sponsors Platinum Sponsors Gold Sponsors

  3. ndrew A Dunkman

  4. ADunkman twitter.com / github.com /

  5. ADunkman twitter github Harvest

  6. ADunkman twitter github Harvest Maintainer connect- assets

  7. Agenda

  8. Agenda Background and History

  9. Agenda Background and History Demo connect-assets

  10. Agenda Background and History Demo connect-assets Possible Configuration

  11. Agenda Time for Answers Background and History Demo connect-assets Possible

    Configuration
  12. Time for Answers Background and History Demo connect-assets Possible Configuration

  13. Asset

  14. Compile Combine Minify Fingerprint Serve

  15. fingerprint

  16. fingerprint Why ?

  17. clear your cache

  18. “ ” clear your cache Every time you say your

    process is broken.
  19. Sprockets

  20. rails asset pipeline

  21. asset pipeline

  22. asset pipeline August 31, 2011

  23. asset pipeline August 31, 2011 August 30, 2011

  24. lets go!

  25. Time for Answers Background and History Demo connect-assets Possible Configuration

  26. Time for Answers Background and History Demo connect-assets Possible Configuration

  27. var express = require("express");! var app = express();! ! !

    ! app.listen(3000);
  28. var express = require("express");! var app = express();! ! !

    ! app.listen(3000); app.use(require("connect-assets")());!
  29. Demo

  30. Time for Answers Background and History Demo connect-assets Possible Configuration

  31. Time for Answers Background and History Demo connect-assets Possible Configuration

  32. Directives

  33. //= include shared-variables Directives

  34. //= include shared-variables //= require jquery Directives

  35. //= include shared-variables //= require jquery //= require_tree views Directives

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

    require_directory templates Directives
  37. //= include shared-variables //= require jquery //= require_tree views //=

    require_directory templates //= require_self Directives
  38. //= require closure-start Directives //= 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();! }; //= require_self
  40. Directives (function () { //= require closure-end var secrets =

    function () {! do_super_secret_stuff();! }; //
  41. Directives (function () { var secrets = function () {!

    do_super_secret_stuff();! }; // })();
  42. app.use(require(“connect-assets”)({ })); Configuration

  43. app.use(require(“connect-assets”)({ })); Configuration paths: [“assets/js”, “assets/css”]

  44. app.use(require(“connect-assets”)({ })); Configuration helperContext: global paths: [“assets/js”, “assets/css”] ,

  45. Stylus .css.styl stylus LESS .css.less less SASS .css.sass node-sass Language

    Extension NPM Package
  46. CoffeeScript .js.coffee coffee-script Coco .js.co coco Language Extension NPM Package

  47. Haml-Coffee .jst.hamlc haml-coffee Handlebars .jst.hbs handlebars Jade .jst.jade jade Language

    Extension NPM Package
  48. EJS .*.ejs ejs ECO .*.eco eco Language Extension NPM Package

  49. 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
  50. Why should you use connect-assets?

  51. Why should you use connect-assets? Your assets should leverage HTTP

    caching as much as possible.
  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.
  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.
  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.
  55. 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. 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. 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)
  58. Time for Answers Background and History Demo connect-assets Possible Configuration

  59. Time for Answers Background and History Demo connect-assets Possible Configuration

  60. Thank you! ADunkman twitter.com / github.com /