automate all the things with grunt
TRANSCRIPT
Automate All the Things with Grunt
Sheelah Brennan http://sheelahb.com2
About Me
@sheelah_b
http://sheelahb.com
2
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?
Sheelah Brennan http://sheelahb.com5
• Install Node.js (https://nodejs.org/)
• Install Grunt CLI (npm install -g grunt-cli)
Grunt Prerequisites
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
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
Sheelah Brennan http://sheelahb.com8
• Enable source map generation to be able to view Sass/Less source files in the browserhttp://www.sitepoint.com/using-source-maps-debug-sass-chrome/
#quicktip
Sheelah Brennan http://sheelahb.com10
• Synchronized cross-device and cross-browser testing FTWnpm install grunt-browser-sync --save-dev http://www.browsersync.io/
BrowserSync Plugin
Sheelah Brennan http://sheelahb.com11
• Automatically adds vendor prefixes where needed in your CSSnpm install grunt-postcss autoprefixer --save-dev
Autoprefixer Plugin
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
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
Sheelah Brennan http://sheelahb.com14
• Concatnpm install grunt-contrib-concat --save-dev
• Uglifynpm install grunt-contrib-uglify --save-dev
JavaScript-Related Plugins
Sheelah Brennan http://sheelahb.com15
• Imageminnpm install grunt-contrib-imagemin --save-dev
Image Optimization Plugin
Sheelah Brennan http://sheelahb.com16
• CSS optimizations (grunt-criticalcss)https://github.com/addyosmani/critical-path-css-tools
• Performance testing (grunt-perfbudget) using WebPageTest.orghttp://www.sitepoint.com/automate-performance-testing-grunt-js/
Taking it up a Level
Sheelah Brennan http://sheelahb.com17
• Unit testing (Ex. grunt-contrib-jasmine)
• Internationalization and localization
Taking it up a Level
Sheelah Brennan http://sheelahb.com18
• Pull down the git repo
• Install the required Grunt plugins (npm install)
Contributing to an Existing Project Using Grunt
Sheelah Brennan http://sheelahb.com19
• Gulp (http://gulpjs.com/)
• CodeKit (Gui, Mac only)
• Prepros (Gui, Windows only)
Grunt Alternatives
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
