What makes me "Grunt"?

2a622fe29c34d10f5edbcf3ea15e1bf1?s=47 Fabien Doiron
February 27, 2014

What makes me "Grunt"?

Slides from my talk at Confoo 2014. Notes to come...

As a front end developer, I want to write code. Dealing with the mundane tasks that come with static assets such as concatenation, minification and versioning, I don't care much for. In this session, I'll explain how to setup Grunt tasks to handle CSS and JavaScript assets in both development and production environments. This automated workflow allows you to easily reproduce both environments locally for testing and debugging.

## Resources
* http://www.getchef.com/
* http://www.vagrantup.com/
* http://www.phing.info/
* https://getcomposer.org/
* http://www.gruntjs.com/
* http://www.bower.io/
* http://www.npmjs.com/
* http://github.com/canvaspop/grunt-static-versioning

## Links
* http://fabien-d.github.io/
* http://twitter.com/fabien_doiron
* http://canvaspop.com
* http://dna11.com
* http://crated.com
* http://developers.canvaspop.com
* http://remade.canvaspop.com/

2a622fe29c34d10f5edbcf3ea15e1bf1?s=128

Fabien Doiron

February 27, 2014
Tweet

Transcript

  1. 4.
  2. 8.

    current typical tools linting / preprocessors / concatenation / minification

    / versioning / testing / coverage / dependency management / continuous deployment / version control / frameworks / libraries…
  3. 15.
  4. 17.
  5. 22.

    i. ~ ▸ git clone … # get code from

    repository ~ ▸ git pull # get latest code from repository
  6. 23.

    ii. ~ ▸ vagrant up # puts together a complete

    environment # provision environment with chef
  7. 24.

    iii. ~ ▸ phing proj:build # get deps with composer,

    npm & bower # database migration with phinx # front-end build with grunt ~ ▸ grunt build # lint, preprocess, concat, min, version # my personal favourite: ascii
  8. 25.
  9. 26.
  10. 29.

    reduce the risk of “works on my machine” by abstracting

    the output settings from the user to the build tool
  11. 31.

    compiling CSS: user settings ~ ▸ sass in.scss:out.css ~ ▸

    lessc in.scss > out.css results: can vary
  12. 32.

    example task (Sass) module.exports = function ( grunt ) {

    var src = '<%= grunt.option( "src" ) %>'; var tmp = '<%= grunt.option( "tmp" ) %>'; grunt.config( 'sass', { dist: { files: [ { expand: true, cwd: src + '/sass', src: [ '*.scss' ], dest: tmp + '/sass', ext: '.css' } ] } } ); grunt.loadNpmTasks( 'grunt-contrib-sass' ); };
  13. 33.

    compiling CSS: tool settings ~ ▸ grunt sass ~ ▸

    grunt less results: are the same
  14. 34.
  15. 39.
  16. 40.

    i. separate targets ~ ▸ grunt build:dev # all source

    files, commented, unminified ~ ▸ grunt build:prod # concat, minified, versioned files
  17. 41.
  18. 42.
  19. 43.
  20. 44.

    grunt versioning task versioning: { options: { cwd: 'public', outputConfigDir:

    'public/config' }, dist: { files: [{ assets: '<%= uglify.main.files %>', key: 'global', dest: 'js', type: 'js', ext: '.min.js' }, { … } ] } }
  21. 45.
  22. 46.
  23. 47.

    iii. generated configuration file ~ ▸ grunt build:dev <?php return

    array( 'static.assets' => array( 'global' => array( 'css' => array( '/static/css/main.css' ), 'js' => array( '/static/js/file1.js', '/static/js/file2.js', … ) ), 'home' => array( 'css' => array(), 'js' => array( 'static/js/home1.js', '/static/js/home2.js' ) ), 'anotherKey' => array( … ) ) );
  24. 48.

    iii. generated configuration file ~ ▸ grunt build:prod <?php return

    array( 'static.assets' => array( 'global' => array( 'css' => array( '/static/css/main.7f41197e.min.css' ), 'js' => array( '/static/js/plugins.7409b19a.min.js', '/static/js/common.4923a32c.min.js', … ) ), 'home' => array( 'css' => array(), 'js' => array( 'static/js/home.47b0990d.min.js' ) ), 'anotherKey' => array( … ) ) );
  25. 49.
  26. 50.
  27. 51.

    ii. generated output ~ ▸ grunt build:dev ~ ▸ grunt

    build:prod ▾ public ▾ static ▾ css main.css ▾ js plugin1.js plugin2.js common1.js common2.js home1.js home2.js … ▾ public ▾ static ▾ css main.7f41197e.min.css ▾ js plugins.7409b19a.min.js common.4923a32c.min.js home.47b0990d.min.js …
  28. 52.
  29. 53.
  30. 54.
  31. 55.
  32. 56.
  33. 57.

    iv. use generated configuration file // inside our layouts <?php

    $this->versionedAsset()->render( 'global' ); ?> ~ ▸ grunt build:dev ~ ▸ grunt build:prod <link rel="stylesheet" href="/static/css/main.css"> … <script src="/static/js/file1.js"></script> <script src="/static/js/file2.js"></script> … <link rel="stylesheet" href="/static/css/main.7f41197e.min.css"> … <script src="/static/js/plugins.7409b19a.min.js"></script> <script src="/static/js/common.4923a32c.min.js"></script>
  34. 60.

    cleaner includes in our layouts messy if( APPLICATION_ENV == "production")

    { // include concat/min files } else { // include all dev files } clean <?php $this->versionedAsset()->render( 'global' ); ?>
  35. 61.
  36. 66.

    i. build dev environment reproduce the error rule out minification

    error use devtools on source files update/add unit, integration, regression tests generally all we need
  37. 67.

    ii. build prod environment reproduce the error use devtools with

    source maps still have access to source files easier to debug than on the live site update/add unit, integration, regression tests
  38. 68.

    “trying to fix a bug in minified code is like

    using a new API with no documentation”
  39. 69.
  40. 70.

    being a front-end developer is hard build tools make you

    awesome automate the repetitive tasks frictionless project setup reproduce output every time access to dev and production environments locally take the stress out of debugging