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.