Post on 08-Aug-2015
Get Grulping with JavaScript Task Runners
Matt Gifford
coldfumonkeh
monkehworkscom
OBLIGATORY QUOTE FROM HISTORICAL FIGURE COMING UP
ldquolife is really simple but 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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 QUOTE FROM HISTORICAL FIGURE COMING UP
ldquolife is really simple but 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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 simple but 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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
4403as of 2200pm 14th May 2015
packagejson
Gruntfilejs
YOU NEED
$
This utility will walk you through creating a packagejson file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 file It 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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task File stylesheetsengagecss created
Done without errors
$ grunt concatcss
Running concatcss (concat) task File stylesheetsengagecss created
Done without errors
THE CODE BASE
| -- stylesheets
-- engagecss
-- formcss
-- maincssnew file generated by Grunt
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
GruntfilejsgruntinitConfig(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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(
options banner Combined CSS file n
options banner Combined CSS file n
GruntfilejsgruntinitConfig(
pkg gruntfilereadJSON(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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(
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 version devDependencies
grunt-contrib-cssmin ^090
Gruntfilejs
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
module gruntinitConfig( )
gruntloadNpmTasks( gruntloadNpmTasks(
gruntloadNpmTasks(grunt-contrib-cssmin)
Gruntfilejs
gruntinitConfig(
snip
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
css files
stylesheetsengagemincss[ stylesheetsengagecss
)
cssmin css
files stylesheetsengagemincss
[ stylesheetsengagecss ]
$ grunt cssmin
Running cssmincss (cssmin) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task File 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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task stylesheetsengagemincss 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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss 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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running cleanrevcss (clean) task Cleaning stylesheets73a5cf64engagemincssOK
Running concatcss (concat) task File stylesheetsengagecss created
Running cssmincss (cssmin) task File stylesheetsengagemincss created 2973 kB rarr 2362 kB
Running cleancombinedcss (clean) task Cleaning stylesheetsengagecssOK
Running revcss (rev) task stylesheetsengagemincss gtgt 73a5cf64engagemincss
Running cleanmincss (clean) task
Done without errors Completed 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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 javascriptsengageminjsdest javascriptsengageminjs
GRUNTFILEJS
rev css files src [stylesheetsengagemincss]
js
files src [javascriptsengageminjs]
GRUNTFILEJS
rev css files src [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 [
js
src [
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 [
stylesheetsformcssstylesheetsmaincss
]tasks [css]
GRUNTFILEJS
watch js files [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 [
tasks [
js files [javascriptsmainjs] tasks [js]
$ grunt
Running watch task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running jshintall (jshint) task
javascriptsmainjs 1 |consolelog(monkeh love is good love) ^ Missing semicolon
gtgt 1 error in 2 files Warning Task jshintall failed Use --force to continue
Aborted due to warnings Completed in 2090s at Mon Jun 02 2014 031355 GMT+0100 (BST) - Waiting
gtgt File javascriptsmainjs changed
$ grunt
Running watch task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running jshintall (jshint) task gtgt 2 files lint free
Running cleanjsrev (clean) task Cleaning javascriptsengageminjsOK
Running uglifyjs (uglify) task File javascriptsengageminjs created 21 B rarr 21 B
Running removeloggingdist (removelogging) task Removed 1 logging statements from javascriptsengageminjs
Running revjs (rev) task javascriptsengageminjs gtgt 0c115107engageminjs
Running cleanminjs (clean) task
Done without errors Completed 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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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( 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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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)
)
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
Gruntfilejswatch js files [
tasks [
css files [ stylesheetsformcss stylesheetsmaincss ] tasks [ cfcs files [ tasks [
cfcs files [cfcscfc] tasks [http_watcher]
$ grunt
Running checklocalconf task Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 Waiting
gtgt gtgt The grunt_local_settingsjson file does not appear to exist gtgt Please create it in this directory with the following content (the URL gtgt for your local app with reload action) gtgt gtgt gtgt local_url httpyour_local_serverreload gtgt gtgt Fatal error Please create and save the grunt_local_settingsjson file then re-run this command
$ grunt
Running checklocalconf task
Running watch task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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 task Waiting
Running http_watcher task
Running httpreload (http) task gtgt 200
Done without errors Completed 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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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([cleanrevcssconcatcsscssmincsscleancombinedcssrevcsscleanmincss
])
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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
1583as of 2200pm 14th May 2015
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