Get Grulping with JavaScript Task Runners (Matt Gifford)

Get Grulping with JavaScript Task Runners
Matt Gifford
@coldfumonkeh
monkehworks.com

OBLIGATORY QUOTE
FROM HISTORICAL FIGURE
COMING UP

“life is really simple,
but we insist on making
it complicated”
Confucius

almost all quality improvement comes via
simplification of design, manufacturing, layout,
processes and procedures.
Tom Peters

http://nodejs.org

https://github.com/tvooo/sublime-grunt

http://gruntjs.com
@gruntjs

http://gruntjs.com/plugins
2,954
as of 8:30am 5th June 2014

YOU NEED
package.json
Gruntfile.js

$
npm init
This utility will walk you through creating a
package.json file.
It only covers the most common items,
and tries to guess sane defaults.
Press ^C at any time to quit.
name: (grunt_project)
grunting_away
version: (0.0.0)
description:
entry point: (index.js)
test command:
.... etc
0.0.1

package.json
{
"name": "grunting_away",
"version": "0.0.1",
"description": "",
"main": "index.js",
"author": "Matt Gifford",
"license": "ISC"
}

package.json
{
"version": "0.0.1"
}

INSTALLING GRUNT
Use npm to install the required modules
$ npm install < whatever the module name is >
You may need sudo or Administrative rights

INSTALLING GRUNT
Grunt 0.3 requires a global install of the library
Grunt 0.4 changed... a lot (for the better)
Now has the ability to run different local versions
$ npm install grunt-cli -g
-g installs the CLI package globally. Good times

INSTALLING GRUNT
We have the global CLI. Now we need a local Grunt
$ npm install grunt --save-dev

$
grunt --version
grunt-cli v0.1.13
grunt v0.4.5

package.json
{
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5"
}
}

package.json
{
"version": "0.0.1",
}
"grunt": "^0.4.5"
}

Gruntfile.js
Lives in the root directory of your project
Commit it into your source control repo!
Holds your task configurations
Can be written as Gruntfile.coffee
(if that floats your boat)

Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
// Pure awesomeness will live here
});
};

VERSION CONTROL
| -- package.json
| -- Gruntfile.js
commit these and share the wealth

THE CODE BASE
| -- javascripts
-- main.js
-- formControls.js
| -- stylesheets
-- form.css
-- main.css
can be managed more effectively

CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev

package.json
{
"version": "0.0.1",
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.4.0"
}
}

Gruntfile.js
grunt.initConfig({
});
grunt.loadNpmTasks('grunt-contrib-concat');
};

Gruntfile.js
grunt.initConfig({
concat : {
css: {
files: {
'stylesheets/engage.css' :
['stylesheets/*.css']
}
}
}
});

Gruntfile.js
grunt.initConfig({
concat : {
css: {
files: {
'stylesheets/engage.css' :
[
'stylesheets/main.css',
'stylesheets/form.css'
]
}
}
}
});

$ grunt concat
Running "concat:css" (concat) task
File stylesheets/engage.css created.
Done, without errors.
$ grunt concat:css

THE CODE BASE
| -- stylesheets
-- engage.css
-- form.css
-- main.css new file generated by Grunt

Gruntfile.js
grunt.initConfig({
concat : {
css: {
options: {
banner: '/* Combined CSS file */n'
},
/* snip */

Gruntfile.js
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat : {
css: {
options: {
banner: '/* <%= pkg.name %> combined file
generated @
<%= grunt.template.today("dd-mm-yyyy") %> */n'
},
/* snip */

CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev

package.json
{
"version": "0.1.0",
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-cssmin": "^0.9.0"
}
}

Gruntfile.js
grunt.initConfig({
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};

Gruntfile.js
grunt.initConfig({
/* snip */
cssmin: {
css: {
files: {
'stylesheets/engage.min.css' :
[ 'stylesheets/engage.css' ]
}
}
},
});

$ grunt cssmin
Running "cssmin:css" (cssmin) task
File stylesheets/engage.min.css created:
29.73 kB → 23.62 kB

THE CODE BASE
| -- stylesheets
-- engage.css
-- engage.min.css
-- form.css
minified file -- main.css

CACHE BUSTING
$ npm install grunt-rev --save-dev

Gruntfile.js
grunt.loadNpmTasks('grunt-rev');
rev: {
css: {
files: {
src: ['stylesheets/engage.min.css']
}
}
},

$ grunt rev:css
Running "rev:css" (rev) task
stylesheets/engage.min.css >> 73a5cf64.engage.min.css

THE CODE BASE
| -- stylesheets
-- 73a5cf64.engage.min.css
-- engage.css
-- engage.min.css
-- form.css
-- main.css
hashed minified file

THE CODE BASE
| -- stylesheets
-- engage.css
-- engage.min.css
-- form.css
-- main.css
we don’t need these

CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev

Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-clean');
clean: {
combinedcss: {
src: ['stylesheets/engage.css']
},
mincss: {
},
revcss: {
src: ['stylesheets/*engage.min.css']
}
},

TOO MANY TASKS
We already have a load of tasks to run
What happens when we need to run them all?
Type each command out?

REMEMBER
simplification of processes and procedures

Gruntfile.js
grunt.registerTask('css',
[
'clean:revcss',
'concat:css',
'cssmin:css',
'clean:combinedcss',
'rev:css',
'clean:mincss'
]);

$ grunt css
Running "clean:revcss" (clean) task
Cleaning stylesheets/73a5cf64.engage.min.css...OK
File stylesheets/engage.min.css created: 29.73 kB → 23.62 kB
Running "clean:combinedcss" (clean) task
Cleaning stylesheets/engage.css...OK
Running "clean:mincss" (clean) task

THE CODE BASE
| -- stylesheets
-- form.css
-- main.css

WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev

Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-watch');
watch: {
css: {
files: [
'stylesheets/form.css',
'stylesheets/main.css'
],
tasks: ['css']
}
},

Gruntfile.js
grunt.registerTask('default', ['watch']);

$ grunt
Running "watch" task
Waiting...
>> File "stylesheets/main.css" changed.
Running "clean:revcss" (clean) task
Cleaning stylesheets/73a5cf64.engage.min.css...OK
File stylesheets/engage.min.css created: 29.73 kB → 23.62 kB
Running "clean:combinedcss" (clean) task
Cleaning stylesheets/engage.css...OK
Running "clean:mincss" (clean) task
Completed in 0.485s at Mon Jun 02 2014 02:26:21 GMT+0100 (BST) - Waiting...

THE CODE BASE
| -- javascripts
-- main.js
-- formControls.js

JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev

GRUNTFILE.JS
grunt.loadNpmTasks('grunt-contrib-jshint');
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
},
},
all: ['Gruntfile.js','javascripts/main.js']
},

GRUNTFILE.JS
grunt.loadNpmTasks('grunt-contrib-uglify');
uglify : {
js: {
files: {
'javascripts/engage.min.js' :
[ 'javascripts/main.js' ]
}
}
},

GRUNTFILE.JS
grunt.loadNpmTasks('grunt-remove-logging');
removelogging: {
dist: {
src: 'javascripts/engage.min.js',
dest: 'javascripts/engage.min.js'
}
},

GRUNTFILE.JS
rev: {
css: {
files: {
}
},
js: {
files: {
src: ['javascripts/engage.min.js']
}
}
},

GRUNTFILE.JS
grunt.registerTask('js',
[
'jshint',
'clean:jsrev',
'uglify:js',
'removelogging',
'rev:js',
'clean:minjs'
]);

GRUNTFILE.JS
watch: {
js: {
files: ['javascripts/main.js'],
tasks: ['js']
},
css: {
files: [
],
tasks: ['css']
}
},

GRUNTFILE.JS
watch: {
js: {
tasks: ['js']
},
css: {
files: [
],
tasks: ['css']
}
}
},

$ grunt
Waiting...
>> File "javascripts/main.js" changed.
Running "jshint:all" (jshint) task
javascripts/main.js
1 |console.log('monkeh love is good love')
^ Missing semicolon.
>> 1 error in 2 files
Warning: Task "jshint:all" failed. Use --force to continue.
Aborted due to warnings.

$ grunt
Waiting...
>> File "javascripts/main.js" changed.
Running "jshint:all" (jshint) task
>> 2 files lint free.
Running "clean:jsrev" (clean) task
Cleaning javascripts/engage.min.js...OK
Running "uglify:js" (uglify) task
File javascripts/engage.min.js created: 21 B → 21 B
Running "removelogging:dist" (removelogging) task
Removed 1 logging statements from javascripts/engage.min.js
Running "rev:js" (rev) task
javascripts/engage.min.js >> 0c115107.engage.min.js
Running "clean:minjs" (clean) task

PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev

Gruntfile.js
grunt.loadNpmTasks('grunt-http');
http: {
reload: {
options: {
url: 'http://127.0.0.1:8000/index.cfm?reload=true'
}
}
},

Gruntfile.js
grunt.initConfig({
local_settings: {
local_url: ''
},
...
http: {
reload: {
options: {
url: '<%= local_settings.local_url %>'
}
}
},

Gruntfile.js
grunt.registerTask('default', ['checklocalconf']);

Gruntfile.js
grunt.registerTask('checklocalconf', 'Check if the local config JSON file exists', function(arg) {
if(grunt.file.exists('grunt_local_settings.json')) {
grunt.task.run('watch');
} else {
grunt.log.errorlns('');
grunt.log.errorlns('The grunt_local_settings.json file does not appear to exist.');
grunt.log.errorlns('{');
grunt.log.errorlns(' "local_url": "http://your_local_server/?reload"');
grunt.log.errorlns('}');
grunt.fail.fatal('Please create and save the grunt_local_settings.json file.');
};
});

Gruntfile.js
grunt.registerTask('http_watcher',
'Set the local url before running the watch command',
function() {
var jsonLocalSettings = grunt.file.readJSON("grunt_local_settings.json");
grunt.config.set('local_settings', jsonLocalSettings);
grunt.config.requires('local_settings');
grunt.task.run('http:reload');
});

Gruntfile.js
watch: {
js: {
tasks: ['js']
},
css: {
files: [
],
tasks: ['css']
},
cfcs: {
files: ['cfcs/*.cfc'],
tasks: ['http_watcher']
}
},

$ grunt
Running "checklocalconf" task
Waiting...
>>
>> The grunt_local_settings.json file does not appear to exist.
>> Please create it in this directory with the following content (the URL
>> for your local app with reload action):
>>
>> {
>> "local_url": "http://your_local_server/?reload"
>> }
>>
Fatal error: Please create and save the grunt_local_settings.json file then
re-run this command.

$ grunt
Running "checklocalconf" task
Waiting...
>> File "cfcs/test.cfc" changed.
Running "http_watcher" task
Running "http:reload" (http) task
>> 200
Completed in 2.061s at Tue Jun 03 2014 12:01:44 GMT+0100 (BST) - Waiting...

INJECTING ASSETS
$ npm install grunt-injector --save-dev

Gruntfile.js
grunt.loadNpmTasks('grunt-injector');
injector: {
options: {},
css: {
files: {
'layout.cfm': ['stylesheets/*engage.min.css'],
}
},
js: {
files: {
'layout.cfm': ['javascripts/*engage.min.js'],
}
}
}

Gruntfile.js
grunt.registerTask('css',
[
'clean:revcss',
'concat:css',
'cssmin:css',
'clean:combinedcss',
'rev:css',
'clean:mincss',
'injector:css'
]);

TIDY UP
There are no limits to the number
of plugins you can use
You may also be duplicating file paths a lot
Your Gruntfile could get messy quickly

Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-http');
grunt.loadNpmTasks('grunt-injector');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-remove-logging');
grunt.loadNpmTasks('grunt-rev');
grunt.loadNpmTasks('grunt-notify');

TIDY UP
$ npm install matchdep --save-dev

Gruntfile.js
require('matchdep')
.filterDev('grunt-*')
.forEach(grunt.loadNpmTasks);

ASSIGN VARIABLES
Use the variable system to reduce duplicate text

Gruntfile.js
grunt.initConfig({
minCSS: 'stylesheets/engage.min.css',
});
cssmin: {
css: {
files: {
'<%= minCSS %>' : [ 'stylesheets/engage.css' ]
}
}
},
clean: {
mincss: {
src: ['<%= minCSS %>']
}
}

WHAT ELSE CAN IT DO?
image optimisation and resizing
git integration
run unit tests (e.g. Jasmine)
templating
...

WHAT ELSE CAN IT DO?
pretty much anything you want it to
http://gruntjs.com/plugins

http://gulpjs.com
@gulpjs

http://gulpjs.com/plugins/
635
as of 8:30am 5th June 2014

INSTALLING GULP
As a system wide module
$ npm install gulp -g

INSTALLING GULP
Getting a local gulp version for the project
$ npm install gulp --save-dev

gulpfile.js
Lives in the root directory of your project
Commit it into your source control repo!
Holds your task configurations
Lowercase file name!

gulpfile.js
// Include gulp
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});

gulpfile.js
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var header = require('gulp-header');

gulpfile.js
// Default Task
gulp.task('default', ['watch']);
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
});

gulpfile.js
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

gulpfile.js
// Concatenate & Minify JS
gulp.task('scripts', function() {
var headerValue = "Evaluated by gulp.n";
return gulp.src('js/*.js')
.pipe(concat('combined.js'))
.pipe(header(headerValue))
.pipe(gulp.dest('dist'))
.pipe(rename('combined.min.js'))
.pipe(uglify())
.pipe(header(headerValue))
.pipe(gulp.dest('dist'));
});

http://gulpfiction.divshot.io

Streaming and piping give speed enhancements
Code over configuration
Still early adoption - plugins limited
JS / Node exposure beneficial (?)

Sub tasks easily managed
Impressive number of plugins and extensions
I/O issues and speed (in comparison)
Configuration could get messy

FINAL WORDS
Save your config files (repo)
Use skeleton variation across your projects
Create
Employ
Refine
Relax

FINAL WORDS
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely

Thank you!
Matt Gifford
@coldfumonkeh
monkehworks.com

Get Grulping with JavaScript Task Runners (Matt Gifford)

More Related Content

What's hot (19)

Similar to Get Grulping with JavaScript Task Runners (Matt Gifford) (20)

More from Future Insights (20)

Recently uploaded (20)

Get Grulping with JavaScript Task Runners (Matt Gifford)