Getting Started with Grunt for Better Frontend Ops: DrupalCon Austin Session Notes

Tuesday, June 3, 2014
Wayne Eaker
Getting Started with Grunt for Better Frontend Ops: DrupalCon Austin Session Notes

Why use Grunt

  • Grunt is for automated front-end workflows.
  • Allows automation of best practices.
  • Work in small chunks of code.
  • Test and lint our code
  • Abstract front-end code with SASS

Steps

  1. Install Node.js (brew install node)
  2. Package.json: like module.info (npm init)
  3. Install Grunt (npm install grunt-cli -g)
  4. Install Grunt plugins.
  5. npm install --save-dev grunt
  6. Gruntfile.js
  7. Configure tasks
  8. Install SASS Task npm install --save-dev grunt-contrib-sass
  9. Default Task (compile SASS, etc)

Tasks / Plugins

  • Autoprefixer: adds vendor prefixes automatically
  • http://gruntjs.com/plugins
  • Watch task: automatically runs grunt for you when files change.
  • Live Reload
  • CSSmin
  • JShint
  • browserify
  • uglifyjs
  • PHP Codesniffer
  • PHP Lint
  • PHP Unit
  • Drush: call drush commands automatically
  • load-grunt-config - config with YAML
  • grunt-notify: notifications to growl or notification center on fails
  • grunt-newer: only run certain tasks on new files

What about Gulp?

  • Faster build times
  • Pipes directly between tasks with less temp files.