Painless asset management with connect-assets @ NoVaNode

Painless asset management with connect-assets @ NoVaNode

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

February 20, 2014
Tweet

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. Asset

  7. Compile Combine Minify Fingerprint Serve

  8. fingerprint

  9. fingerprint Why ?

  10. clear your cache

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

    process is broken.
  12. Sprockets

  13. rails asset pipeline

  14. asset pipeline

  15. asset pipeline August 31, 2011

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

  17. Trevor Burnham

  18. Trevor Burnham

  19. lets go!

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

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

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

  23. //= include shared-variables

  24. //= include shared-variables //= require jquery

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

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

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

    require_directory templates //= require_self
  28. Why should you use connect-assets?

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

    caching as much as possible.
  30. 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.
  31. 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.
  32. 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.
  33. 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, TypeScript, etc)
  34. 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, TypeScript, etc) Choosing a language that compiles to CSS or JavaScript shouldn’t introduce extra build/development steps.
  35. 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, TypeScript, etc) 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.
  36. ?

  37. Thanks for stopping by!

  38. connect-assets Andrew Dunkman

  39. connect-assets Andrew Dunkman FREE MONTH of HARVEST