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

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

Session Link: https://austin2014.drupal.org/session/getting-started-grunt-better-frontend-ops

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.

Do you want to become an expert Drupal developer? Our classes will get you there in record time!

"The entire course was much more than I expected. I did attend a previous Drupal course, but there was no comparison. This ecourse rocks!"
Missi - Webmaster at a public library system