Cole Geissinger
Senior Web Engineer at 10up. PHP, JavaScript, technology, musician and enjoys a good sandwich.
Automating Redundancies with Grunt.js
Automating Redundancies with Grunt.js
Cole Geissinger
@colegeissinger
10up & WIMP
Slides: http://slides.com/colegeissinger/gruntjs/live
What is Grunt
Why use Grunt
What you can do
Quick Example
What is Grunt
Why use Grunt
What you can do
Quick Example
What is Grunt
What is Grunt
Task-based command line build tool for JavaScript Projects
Grunt by the numbers
Grunt by the numbers
February 2015 Downloads
Publicly Available Plugins
1,120,313
1,120,313
11,826
11,826
Grunt in action
Grunt in action
Why use Grunt?
Why use Grunt?
3 Reasons
3 Reasons
Productivity
Consistency
Community
Productivity
Productivity
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
Consistency
Consistency
• 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.
Community
Community
• 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!
What you can do
What you can do
How to install
How to install
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-devHow to Configure
How to Configure
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'] );
};Run Grunt!
Run Grunt!
~/project$ grunt
Running "uglify:all" (uglify) task
>> 1 file created.
Done, without errors.
~/project$ So much more to be done...
So much more to be done...
Creating a real world project with Grunt
More custom Project Scaffolding
Create your own tasks
Unit Testing with Grunt
Continuous integration
Running external tasks
Thank You!
Thank You!
Cole Geissinger
@colegeissinger
http://10up.com | http://beawimp.org
Automating Redundancies with Grunt.js
By Cole Geissinger
Automating Redundancies with Grunt.js
Let's face it, in our line of work, we are faced with doing some pretty redundant work. Our time is valuable, and reducing monotonous work is critical to producing the best quality work we can. Enter Grunt.js. Grunt.js is a JavaScript task runner built to handle these redundant web development processes we are forced to suffer through every day. The less work you have to do when performing repetitive tasks like minification, compilation, image optimization, unit testing, linting, etc, the easier your job becomes. With Grunt, we'll be able to automate redundancies and speed up our web development processes. We'll learn about the basics of Grunt.js is and what it can do to ease our development process and how to use it. This is a great talk for any developer looking to take their knowledge/tool set to the next level!
