Automate All the Things with Grunt
0 likes337 views
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.
Automate All the Things with Grunt
- 1. Automate All the Things with Grunt
- 2. Sheelah Brennan http://sheelahb.com2 About Me @sheelah_b http://sheelahb.com 2
- 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
- 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