This document discusses how to automate development tasks using Grunt. It explains that Grunt can be used to compile Sass/Less to CSS, automatically reload content after changes, lint, concatenate and compress JavaScript files, and optimize images. It provides instructions on setting up Grunt, installing common plugins for tasks like watching files, Sass compilation, BrowserSync, Autoprefixer, JavaScript linting and minification, and image optimization. Alternatives to Grunt like Gulp and CodeKit are also mentioned.

1. Automate All the Things
with Grunt

2. Sheelah Brennan http://sheelahb.com2
About Me
@sheelah_b
http://sheelahb.com
2

3. Sheelah Brennan http://sheelahb.com3
What is Grunt?

4. Sheelah Brennan http://sheelahb.com4
• Compile Sass or Less into CSS
• Automatically reload content after changes to
CSS, JavaScript, HTML, or other assets
• Lint, concatenate, and compress JavaScript files
• Optimize images and SVG files
• Automate performance testing
What can it do?

5. Sheelah Brennan http://sheelahb.com5
• Install Node.js (https://nodejs.org/)
• Install Grunt CLI (npm install -g grunt-cli)
Grunt Prerequisites

6. Sheelah Brennan http://sheelahb.com6
• Generate a package.json file (npm init)
• Install Grunt in your project (npm install
grunt --save-dev)
• Barebones Gruntfile.js
Grunt Setup within Project

7. Sheelah Brennan http://sheelahb.com7
• Grunt watch plugin (npm install grunt-
contrib-watch --save-dev)
• Grunt libsass plugin (npm install grunt-sass
--save-dev)
Starter Grunt Plugins

8. Sheelah Brennan http://sheelahb.com8
• Enable source map generation to be able to view Sass/
Less source files in the browser
http://www.sitepoint.com/using-source-maps-debug-
sass-chrome/
#quicktip

9. Sheelah Brennan http://sheelahb.com9
BrowserSync Plugin

10. Sheelah Brennan http://sheelahb.com10
• Synchronized cross-device and cross-browser
testing FTW
npm install grunt-browser-sync --save-
dev
http://www.browsersync.io/
BrowserSync Plugin

11. Sheelah Brennan http://sheelahb.com11
• Automatically adds vendor prefixes where
needed in your CSS
npm install grunt-postcss autoprefixer
--save-dev
Autoprefixer Plugin

12. Sheelah Brennan http://sheelahb.com12
• No need to manually include loadNpmTasks
entries for each task (npm install load-
grunt-tasks --save-dev)
• Get time metrics for each task (npm install
--save-dev time-grunt)
Automatically Load Tasks

13. Sheelah Brennan http://sheelahb.com13
• JSHint (http://jshint.com/)
npm install grunt-contrib-jshint
--save-dev
npm install jshint-stylish --save-dev
JavaScript-Related Plugins

14. Sheelah Brennan http://sheelahb.com14
• Concat
npm install grunt-contrib-concat
--save-dev
• Uglify
npm install grunt-contrib-uglify
--save-dev
JavaScript-Related Plugins

15. Sheelah Brennan http://sheelahb.com15
• Imagemin
npm install grunt-contrib-imagemin
--save-dev
Image Optimization Plugin

16. Sheelah Brennan http://sheelahb.com16
• CSS optimizations (grunt-criticalcss)
https://github.com/addyosmani/critical-path-css-
tools
• Performance testing (grunt-perfbudget) using
WebPageTest.org
http://www.sitepoint.com/automate-
performance-testing-grunt-js/
Taking it up a Level

17. Sheelah Brennan http://sheelahb.com17
• Unit testing (Ex. grunt-contrib-jasmine)
• Internationalization and localization
Taking it up a Level

18. Sheelah Brennan http://sheelahb.com18
• Pull down the git repo
• Install the required Grunt plugins (npm install)
Contributing to an Existing
Project Using Grunt

19. Sheelah Brennan http://sheelahb.com19
• Gulp (http://gulpjs.com/)
• CodeKit (Gui, Mac only)
• Prepros (Gui, Windows only)
Grunt Alternatives

20. Sheelah Brennan http://sheelahb.com20
• https://css-tricks.com/grunt-people-think-things-
like-grunt-weird-hard/
• https://scotch.io/tutorials/a-simple-guide-to-
getting-started-with-grunt/
• http://gruntjs.com/getting-started/
References

21. Sheelah Brennan http://sheelahb.com
@sheelah_b
21
Questions?