Cole Geissinger
@colegeissinger
10up & WIMP
Slides: http://slides.com/colegeissinger/gruntjs/live
February 2015 Downloads
Publicly Available Plugins
2
min
6
x/hr
96
min in 8hrs
Manual workflow
2-3
hrs
to learn Grunt
1-2
hrs
to implement
1
week
time is recovered
• Manual process is prone to human error.
• Create consistency by centralizing into a script.
• Ramp up newcomers instead of being bogged down by complex workflows.
• Strong, active community
• Thousands of plugins fit for you needs
• Lots of documentation to create your own plugins
• Linting
• Preprocessing
• Minification
• Concatenation
• Deployment
• Image Optimization
• Run Unit Tests
• So much more!
Install Node.js
Run some commands
~/project$ npm install -g grunt-cli
~/project$ npm init
~/project$ npm install grunt --save-dev
~/project$ npm install grunt-contrib-uglify --save-dev
module.exports = function( grunt ) { // Code in Gruntfile.js
'use strict';
// Project configuration
grunt.initConfig( {
uglify: {
all: {
options: {
// Shorten variables to single characters
mangle: true,
// Remove unnecessary whitespace
compressed: true,
// Used so you can view unminified code in browsers
sourcemap: "js/sourcemap.map",
// Adds content to the top of minified files
banner: '/*! Cole Geissinger 2015 */\n'
},
files: {
// Grab our source file and say where to place the minified version
'js/script.min.js': ['js/src/script.js']
}
}
}
} );
// Load our plugins
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
// Create our default Grunt task
grunt.registerTask( 'default', ['uglify'] );
};
~/project$ grunt
Running "uglify:all" (uglify) task
>> 1 file created.
Done, without errors.
~/project$
Creating a real world project with Grunt
More custom Project Scaffolding
Create your own tasks
Unit Testing with Grunt
Continuous integration
Running external tasks
Cole Geissinger
@colegeissinger
http://10up.com | http://beawimp.org