Embed Size (px)
DESCRIPTION
Taken from the London Web Meet-up, this is Matt's session: Get Grulping with JavaScript Task Runners. In this session Matt will introduce the attendees to Grunt and Gulp, two incredibly powerful JavaScript task runners. It will help clarify what they are, why you need them and how you could use them in your projects, including how to introduce them into your development workflow and cycle. You will learn * What Gulp and Grunt are * Running Tasks – how they can be used * Plugins, extensions and enhancements * Building them into your workflow * The differences between the two task runners
Citation preview
Get Grulping with JavaScript Task Runners
Matt Gifford
coldfumonkeh
monkehworkscom
OBLIGATORY QUOTEFROM HISTORICAL FIGURECOMING UP
ldquolife is really simplebut we insist on making
it complicatedrdquoConfucius
WTF
IT HURTS
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
OBLIGATORY QUOTEFROM HISTORICAL FIGURECOMING UP
ldquolife is really simplebut we insist on making
it complicatedrdquoConfucius
WTF
IT HURTS
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
ldquolife is really simplebut we insist on making
it complicatedrdquoConfucius
WTF
IT HURTS
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
WTF
IT HURTS
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
IT HURTS
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
almost all quality improvement comes via simplification of design manufacturing layout
processes and procedures
Tom Peters
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
httpnodejsorg
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
httpsgithubcomtvooosublime-grunt
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
httpgruntjscomgruntjs
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
04x
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
httpgruntjscomplugins
2954as of 830am 5th June 2014
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$
This utility will walk you through creating a packagejson fileIt only covers the most common items and tries to guess sane defaults
Press ^C at any time to quit
name (grunt_project) version (000)
grunting_away
description entry point (indexjs) test command
npm init
etc
001
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
packagejson
name grunting_away version 001 description main indexjs author Matt Gifford license ISC
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
packagejson
name grunting_away version 001
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
INSTALLING GRUNT
$ npm install lt whatever the module name is gt
Use npm to install the required modules
You may need sudo or Administrative rights
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
INSTALLING GRUNT
Grunt 03 requires a global install of the library
Grunt 04 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-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
INSTALLING GRUNT
We have the global CLI Now we need a local Grunt
$ npm install grunt --save-dev
$
grunt-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$
grunt-cli v0113
grunt --version
grunt v045
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
packagejson
name grunting_away version 001 devDependencies grunt ^045
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
name grunting_away version 001 devDependencies grunt ^045
devDependencies grunt ^045
packagejson
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Can be written as Gruntfilecoffee (if that floats your boat)
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
VERSION CONTROL
| -- packagejson
| -- Gruntfilejs
commit these and share the wealth
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
TEAM GRUNTING
$ npm install
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
| -- stylesheets
-- formcss
-- maincss
can be managed more effectively
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
CSS CONCATENATION
$ npm install grunt-contrib-concat --save-dev
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
packagejson
name grunting_away version 001 devDependencies grunt ^045 grunt-contrib-concat ^040
grunt-contrib-concat ^040
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [stylesheetscss]
)
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntinitConfig( concat css files
stylesheetsengagecss [ stylesheetsmaincss stylesheetsformcss]
)
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt concat
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) taskFile stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntinitConfig(
concat css
options banner Combined CSS file n
snip
options banner Combined CSS file n
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntinitConfig(
pkg gruntfilereadJSON(packagejson) concat css
snip
pkg gruntfilereadJSON(packagejson)
options banner lt= pkgname gt combined file generated lt= grunttemplatetoday(dd-mm-yyyy) gt n
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
CSS MINIFICATION
$ npm install grunt-contrib-cssmin --save-dev
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
packagejson
name grunting_away version 010 devDependencies grunt ^045 grunt-contrib-concat ^040 grunt-contrib-cssmin ^090
grunt-contrib-cssmin ^090
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
moduleexports = function(grunt) gruntinitConfig( Pure awesomeness will live here )
gruntloadNpmTasks(grunt-contrib-concat) gruntloadNpmTasks(grunt-contrib-cssmin)
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntinitConfig( snip
cssmin css
files stylesheetsengagemincss [ stylesheetsengagecss ]
)
cssmin css files
stylesheetsengagemincss [ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt cssmin
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
THE CODE BASE
| -- stylesheets
-- engagecss
-- engagemincss
-- formcssminified file
-- maincss
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
CACHE BUSTING
$ npm install grunt-rev --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntloadNpmTasks(grunt-rev)
rev css files src [stylesheetsengagemincss]
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt revcss
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
hashed minified file
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- engagecss
-- engagemincss
-- formcss
-- maincss
we donrsquot need these
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
CLEAN UP OPERATION
$ npm install grunt-contrib-clean --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)
clean combinedcss src [stylesheetsengagecss] mincss src [stylesheetsengagemincss] revcss src [stylesheetsengagemincss]
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
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
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
simplification of processes and procedures
REMEMBER
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt css
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
THE CODE BASE
| -- stylesheets
-- 73a5cf64engagemincss
-- formcss
-- maincss
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
WATCHINGALWAYS WATCHING
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
WATCHING FOR FILE CHANGES
$ npm install grunt-contrib-watch --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-watch)
watch css files [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntregisterTask(default [watch])
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt
Running watch taskWaiting
Running cleanrevcss (clean) taskCleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) taskFile stylesheetsengagecss created
Running cssmincss (cssmin) taskFile stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) taskCleaning stylesheetsengagecssOK
Running revcss (rev) taskstylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errorsCompleted in 0485s at Mon Jun 02 2014 022621 GMT+0100 (BST) - Waiting
gtgt File stylesheetsmaincss changed
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
THE CODE BASE
| -- javascripts
-- mainjs
-- formControlsjs
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
JAVASCRIPT MANAGEMENT
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-remove-logging --save-dev
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-jshint)
jshint options curly true eqeqeq true eqnull true browser true globals jQuery true all [Gruntfilejsjavascriptsmainjs]
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
gruntloadNpmTasks(grunt-contrib-uglify)
uglify js files javascriptsengageminjs [ javascriptsmainjs ]
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
gruntloadNpmTasks(grunt-remove-logging)
removelogging dist src javascriptsengageminjs dest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
rev css files src [stylesheetsengagemincss] js files src [javascriptsengageminjs]
js files src [javascriptsengageminjs]
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
simplification of processes and procedures
REMEMBER
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
gruntregisterTask(js [jshint cleanjsrev uglifyjs removelogging revjs cleanminjs
])
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNTFILEJS
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css]
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt
Running watch taskWaiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 filesWarning Task jshintall failed Use --force to continue
Aborted due to warningsCompleted in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt
Running watch taskWaiting
Running jshintall (jshint) taskgtgt 2 files lint free
Running cleanjsrev (clean) taskCleaning javascriptsengageminjsOK
Running uglifyjs (uglify) taskFile javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) taskRemoved 1 logging statements from javascriptsengageminjs
Running revjs (rev) taskjavascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errorsCompleted in 0721s at Mon Jun 02 2014 031405 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
RELOADING YOUR APP
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
PERFORMING HTTP REQUESTS
$ npm install grunt-http --save-dev
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntloadNpmTasks(grunt-http)
http reload options url http1270018000indexcfmreload=true
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GruntfilejsgruntinitConfig( pkg gruntfilereadJSON(packagejson) local_settings local_url
http reload options url lt= local_settingslocal_url gt
local_settings local_url
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntregisterTask(default [checklocalconf])
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntregisterTask(checklocalconf Check if the local config JSON file exists function(arg) if(gruntfileexists(grunt_local_settingsjson)) grunttaskrun(watch) else gruntlogerrorlns() gruntlogerrorlns(The grunt_local_settingsjson file does not appear to exist) gruntlogerrorlns() gruntlogerrorlns() gruntlogerrorlns( local_url httpyour_local_serverreload) gruntlogerrorlns() gruntlogerrorlns() gruntfailfatal(Please create and save the grunt_local_settingsjson file) )
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntregisterTask(http_watcher Set the local url before running the watch command function() var jsonLocalSettings = gruntfilereadJSON(grunt_local_settingsjson) gruntconfigset(local_settings jsonLocalSettings) gruntconfigrequires(local_settings) grunttaskrun(httpreload))
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
watch js files [javascriptsmainjs] tasks [js] css files [ stylesheetsformcss stylesheetsmaincss ] tasks [css] cfcs files [cfcscfc] tasks [http_watcher]
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt
Running checklocalconf taskWaiting
gtgt gtgt The grunt_local_settingsjson file does not appear to existgtgt Please create it in this directory with the following content (the URLgtgt for your local app with reload action)gtgt gtgt gtgt local_url httpyour_local_serverreloadgtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ grunt
Running checklocalconf task
Running watch taskWaiting
Running http_watcher task
Running httpreload (http) taskgtgt 200
Done without errorsCompleted in 2061s at Tue Jun 03 2014 120144 GMT+0100 (BST) - Waiting
gtgt File cfcstestcfc changed
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
$ npm install grunt-injector --save-dev
INJECTING ASSETS
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntloadNpmTasks(grunt-injector)
injector options css files layoutcfm [stylesheetsengagemincss] js files layoutcfm [javascriptsengageminjs]
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntregisterTask(css [cleanrevcss concatcss cssmincss cleancombinedcss revcss cleanmincss
])
injectorcss
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
TIDY UP
There are no limits to the number of plugins you can use
Your Gruntfile could get messy quickly
You may also be duplicating file paths a lot
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntloadNpmTasks(grunt-contrib-clean)gruntloadNpmTasks(grunt-contrib-concat)gruntloadNpmTasks(grunt-contrib-csslint)gruntloadNpmTasks(grunt-contrib-cssmin)gruntloadNpmTasks(grunt-http)gruntloadNpmTasks(grunt-injector)gruntloadNpmTasks(grunt-contrib-jshint)gruntloadNpmTasks(grunt-contrib-uglify)gruntloadNpmTasks(grunt-contrib-watch)gruntloadNpmTasks(grunt-remove-logging)gruntloadNpmTasks(grunt-rev)gruntloadNpmTasks(grunt-notify)
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
TIDY UP
$ npm install matchdep --save-dev
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
require(matchdep)filterDev(grunt-)forEach(gruntloadNpmTasks)
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
ASSIGN VARIABLES
Use the variable system to reduce duplicate text
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Gruntfilejs
gruntinitConfig( pkg gruntfilereadJSON(packagejson) minCSS stylesheetsengagemincss
)
cssmin css files lt= minCSS gt [ stylesheetsengagecss ]
clean mincss src [lt= minCSS gt]
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
WHAT ELSE CAN IT DO
image optimisation and resizing
git integration
run unit tests (eg Jasmine)
templating
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
WHAT ELSE CAN IT DO
pretty much anything you want it to
httpgruntjscomplugins
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
httpgulpjscomgulpjs
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
httpgulpjscomplugins
635as of 830am 5th June 2014
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
INSTALLING GULP
As a system wide module
$ npm install gulp -g
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
INSTALLING GULP
$ npm install gulp --save-dev
Getting a local gulp version for the project
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
gulpfilejs
Lives in the root directory of your project
Commit it into your source control repo
Holds your task configurations
Lowercase file name
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
gulpfilejs
Include gulpvar gulp = require(gulp)
gulptask(default function() place code for your default task here)
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
PIPES AND STREAMS
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
GRUNT
GULP
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
gulpfilejs
Include gulpvar gulp = require(gulp)
Include Our Pluginsvar jshint = require(gulp-jshint)var concat = require(gulp-concat)var uglify = require(gulp-uglify)var rename = require(gulp-rename)var header = require(gulp-header)
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
gulpfilejs
Default Taskgulptask(default [watch])
Watch Files For Changesgulptask(watch function() gulpwatch(jsjs [lint scripts]))
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
gulpfilejs
Lint Taskgulptask(lint function() return gulpsrc(jsjs) pipe(jshint()) pipe(jshintreporter(default)))
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
gulpfilejs
Concatenate amp Minify JSgulptask(scripts function() var headerValue = Evaluated by gulpn return gulpsrc(jsjs) pipe(concat(combinedjs)) pipe(header(headerValue)) pipe(gulpdest(dist)) pipe(rename(combinedminjs)) pipe(uglify()) pipe(header(headerValue)) pipe(gulpdest(dist)))
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
httpgulpfictiondivshotio
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
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
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Sub tasks easily managed
Impressive number of plugins and extensions
IO issues and speed (in comparison)
Configuration could get messy
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
ITS NOT A CONTEST
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
HAPPY
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Save your config files (repo)
Use skeleton variation across your projects
FINAL WORDS
Create
Employ
Refine
Relax
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Has the potential to be addictive
Check for updates and improved methods
Use your time wisely
FINAL WORDS
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
Thank you
Matt Gifford
coldfumonkeh
monkehworkscom
