@andismith@Mcr_FRED
About Me
Andi Smith!
Technical Architect @ AKQA!
!
- @andismith
www.devtoolsecrets.com
www.akqa.com
www.andismith.com
The Perfect Experience
- For our users

- For us?
The Challenge
Find the perfect workflow
London
Manchester
Train Station
TechHub
Did I Succeed?
- Well, no.

- One size does not fit all.
The Perfect Workflow?
Depends on your
requirements.
Project Requirements
It needs to run as a
web app.
Client Requirements
It needs to use our
current CMS.
Hosting Requirements
It will be hosted in a
Java environment.
Your Requirements
I’d prefer to use
Sass over LESS.
IMPROVE
Points to Consider
- Less repetition

- Less errors

- Better performance
Automation = More Fun!
Credit: giphy.com/gifs/tscu52qG7VbwI
Less Pain!
Credit: giphy.com/gifs/XOxay70W2WHbq
How?!
SETUP
DEVELOP
BUILD
SETUP
Choose a Task Runner
Credit: flickr.com/photos/nomadic_lass/6970307781/
Task Runners
What is a Task Runner?
- Give it a list of tasks.

- It does them for you.

- Runs on the Command Line.
What Kind of Tasks?
- Concatentation

- Minification

- JSHint

- Image Optimisation

- LESS/Sass Compliation

- Pretty muc...
A very quick introduction
Credit: hdwpapers.com
NodeJS
- Grunt and Gulp both run on a local
NodeJS server.

- You don’t need to know any NodeJS!

- Install from here: nod...
Package.json
- Keeps a list of dependencies we’re
using.

- Create a new one with:
npm init
Tasks
- Configure Grunt and Gulp with tasks.

- Finding New Tasks:

- Google ‘grunt’/‘gulp’ and the task.

- Search http://...
Adding a New Task
- Everytime we add a new task, we
should add it to package.json

npm install example --save-dev
A very quick introduction to Grunt
Install Grunt CLI
- Install Grunt Command Line Interface
globally (so we can run grunt as a
command)

npm install -g grunt...
Install Grunt
- Install Grunt to our project:



- Use --save-dev to add it to
package.json

npm install grunt --save-dev
Creating a Gruntfile
- Gruntfile.js

module.exports = function(grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.rea...
Running Grunt
- At the Command Line/Terminal:
grunt
A very quick introduction to Gulp
Install Gulp
- Install Gulp globally for command line
and then locally for our package.json
npm install -g gulp
npm instal...
Creating a Gulpfile
- Gulpfile.js

'use strict';
!
var gulp = require('gulp');
// Set variables to each required task/plugin...
Running Gulp
- At the Command Line/Terminal:
gulp
bit.ly/1jPCxeN
A More Detailed Introduction
Which to Use?
Which to Use?
Easy to start with

Stable

2000+ plugins

Yeoman Support

Slower than competitors.
+

+

+

+

-
Grunt
Which to Use?
Fast

No need to temp store files

More like writing JavaScript

Less mature than Grunt
+

+

+

-
Gulp
Which to Use?
Your Choice
- Checklist of requirements

- Check tasks are available
and working

- Grunt is more mature, so
less risk
Scaffold Your Workflow
Get a head start
with Yeoman

!
yeoman.io
Generating a Base
Choosing a Base
- yo webapp

!
- yo assemble

- yo firefox-os

- yo phonegap

- yo wordpress

!
yeoman.io/community-generat...
Customise!
Credit: sailorusagichan.deviantart.com/art/Batmobile-Lawn-mower-310787147
Source !== Destination
Don’t overwrite your work!
src!
- html
- sass
- img
- javascript
dest!
- html
- css (min)
- img (op...
Loading Tasks…
grunt.loadNpmTasks(‘grunt-contrib-connect’);
grunt.loadNpmTasks(‘grunt-contrib-clean’);
grunt.loadNpmTasks(...
npm install load-grunt-tasks
Auto Load Tasks
Load tasks from package.json
npm install gulp-load-plugins
Auto Load Tasks (Grunt)
grunt.loadNpmTasks(‘grunt-contrib-copy’);
grunt.loadNpmTasks(‘grunt-contrib-watch’);
grunt.loadNpm...
Auto Load Tasks (Gulp)
var connect = require(‘gulp-connect’);
var jshint = require(‘gulp-jshint’);
var concat = require(‘g...
npm install

grunt-contrib-connect
Start a Local Server
Host locally without
additional software
npm install gulp-connect
Start a Local Server
connect: {
dev: {
options: {
base: ‘./dest’,
port: 4000
}
}
},
In Grunt:
Start a Local Server
gulp.task(‘connect',
connect.server({
root: ‘./dest’,
port: 4000
})
);
In Gulp:
npm install time-grunt
Workflow Performance
Time your tasks
npm install gulp-duration
Workflow Performance
npm install grunt-concurrent
Make Grunt Faster
Run tasks concurrently
Make Grunt Faster
grunt.initConfig({
concurrent: {
compile: ['coffee', 'sass']
}
});
!
grunt.registerTask('default',
['con...
SETUP
- Scaffold Your Workflow

- Source !== Destination

- Auto Load Tasks

- Start a Local Server

- Time your Tasks

- Ru...
DEVELOP
Performance
Credit: Me!
Focus on
Speed up/help dev

Speed up workflow

!
NOT concatenating or
obfuscating code
Please Wait…
Don’t Wait!
Ask Yourselves
What is the task?

Do you need it?

Do you really need it?
CSS Prefixes
-moz-transition: -moz-transform 200ms;
-ms-transition: -ms-transform 200ms;
-o-transition: -o-transform 200ms;...
npm install grunt-autoprefixer
Use Autoprefixer
Automatically add CSS
vendor prefixes
npm install gulp-autoprefixer
Use Autoprefixer
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
Source:
Outpu...
Use Autoprefixer
Especially awesome for:

- CSS Gradients

- Flexbox

- Supporting ancient devices
npm install

grunt-contrib-watch
Watch & LiveReload
Watch for changes and
auto-refresh the browser
gulp.watch
Watch & LiveReload
Split your watch into smaller groups
watch: {
options: {
livereload: true },
sass: {
files: PATHS.SRC +...
Globbing Performance
images/**/*.{gif,jpg,png}
images/{,*/}*.{gif,jpg,png}
Before:
After:
More: bit.ly/1g2Rar8
Watch & LiveReload
- Chrome:

bit.ly/1ojCxVq

- Firefox:

bit.ly/1hs7yBT

- Safari: 

bit.ly/1sbwfcC
npm install grunt-newer
Compile Changed Files
Make compilation more efficient
npm install gulp-changed
Compile Changed Files
Prefix “newer:” to your task in Grunt.
watch: {
options: {
livereload: true },
sass: {
files: PATHS.S...
Compile Changed Files
Add .pipe(changed(dest)) in Gulp
gulp.src([PATHS.SRC + PATHS.SASS + '{,*/}*.scss'])
.pipe(changed(PA...
Live Editing Our Files
Make changes in the browser by
setting up source maps
sass: {
options: {
sourcemap: true,
style: ‘c...
npm install grunt-responsive-images
Grunt Responsive Images
Resize images
automatically for <picture>

!
brew install grap...
Grunt Responsive Images
responsive_images: {
images: {
options: {
sizes: [{
height: 320, name: “small", width: 400
}, {
he...
DEVELOP
- Autoprefixer

- Watch & LiveReload

- Improve your Globbing Performance

- Newer/Changed files

- Live editing CSS...
BUILD
For build & release
For build & release
- Slower, optimisation tasks.

- Make sure you test a build with
these tasks before go-live!
npm install grunt-usemin
UseMin
Compile CSS/JS and replace
references in HTML.
npm install gulp-usemin
UseMin
<!-- build:css /css/main.min.css -->
<link rel="stylesheet" href=“/css/main.css" />
<link rel="stylesheet" href=“/c...
UseMin
grunt.registerTask('minify', [
‘useminPrepare',
‘concat',
‘cssmin',
‘uglify',
‘usemin'
]);
Grunt file:
UseMin
<link rel="stylesheet" href=“/css/main.min.css” />
Output:
h1 {
margin: 10px;
@media screen and (min-width: 800px) {
margin: 20px;
}
}
!
p {
font-size: 1.2em;
@media screen and (min...
h1 { margin: 10px; }
!
@media screen and (min-width: 800px) {
h1 { margin: 20px; }
}
!
p { font-size: 1.2em; }
!
@media sc...
npm install

grunt-combine-media-queries
Combine Media Queries
Reduce file size with 1
media query per breakpoint
npm insta...
h1 { margin: 10px; }
p { font-size: 1.2em; }
!
@media screen and (min-width: 800px) {
h1 { margin: 20px; }
p { font-size: ...
npm install grunt-uncss
UnCss
Remove unused CSS
npm install gulp-uncss
npm install grunt-modernizr
Streamline Modernizr
Create at build time
npm install gulp-modernizr
npm install grunt-imagemin
Minify Your Images
Reduce image file size
npm install gulp-imagemin
npm install grunt-contrib-compress
Compress Your Files
Reduce your file size so
your users download less.
npm install gulp-...
npm install grunt-zopfli
Zopfli
Improved compression, but
slower.

brew install zopfli
npm install gulp-zopfli
Shrinkwrap
Lock your task
dependencies.

!
npm shrinkwrap
BUILD
- UseMin

- Combine Media Queries

- Remove Unused CSS

- Streamline Modernizr

- Minify Your Images

- Compress

- ...
…
That’s a lot of things!
Credit: flickr.com/photos/jason-samfield/5654182142
Is it?
- Most require minimal setup.

- Avoid mistaeks.
But…
- Don’t include tasks you don’t need.

- Don’t obsess over the perfect
workflow!
Remember…
- Tasks to help you at Develop.

- Tasks to help the user at Build.
A better workflow
SETUP
DEVELOP
BUILD
PERFECT?
Sample CSS Workflow
Sass Compliation
Watch
Autoprefixer
Combine Media
Queries
UseMin
Live Editing
UnCSS
Newer
Build
Develop
...
Sample JS Workflow
JSHint
Watch
Compress
Live Editing
Modernizr
Newer
Build
Develop
UseMin
A better workflow
SETUP
DEVELOP
BUILD
THANKS
@andismith
- Slides/Blog:

http://j.mp/qftpw

- My site:

http://andismith.com
Quest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFRED
Upcoming SlideShare
Loading in...5
×

Quest for the Perfect Workflow for McrFRED

387

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
387
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Quest for the Perfect Workflow for McrFRED

  1. 1. @andismith@Mcr_FRED
  2. 2. About Me Andi Smith! Technical Architect @ AKQA! ! - @andismith
  3. 3. www.devtoolsecrets.com
  4. 4. www.akqa.com
  5. 5. www.andismith.com
  6. 6. The Perfect Experience - For our users - For us?
  7. 7. The Challenge Find the perfect workflow
  8. 8. London Manchester
  9. 9. Train Station TechHub
  10. 10. Did I Succeed? - Well, no.
 - One size does not fit all.
  11. 11. The Perfect Workflow? Depends on your requirements.
  12. 12. Project Requirements It needs to run as a web app.
  13. 13. Client Requirements It needs to use our current CMS.
  14. 14. Hosting Requirements It will be hosted in a Java environment.
  15. 15. Your Requirements I’d prefer to use Sass over LESS.
  16. 16. IMPROVE
  17. 17. Points to Consider - Less repetition - Less errors - Better performance
  18. 18. Automation = More Fun! Credit: giphy.com/gifs/tscu52qG7VbwI
  19. 19. Less Pain! Credit: giphy.com/gifs/XOxay70W2WHbq
  20. 20. How?! SETUP DEVELOP BUILD
  21. 21. SETUP
  22. 22. Choose a Task Runner Credit: flickr.com/photos/nomadic_lass/6970307781/
  23. 23. Task Runners
  24. 24. What is a Task Runner? - Give it a list of tasks. - It does them for you. - Runs on the Command Line.
  25. 25. What Kind of Tasks? - Concatentation - Minification - JSHint - Image Optimisation - LESS/Sass Compliation - Pretty much anything you can think of! - Copying - Test Runners - Uglification
  26. 26. A very quick introduction Credit: hdwpapers.com
  27. 27. NodeJS - Grunt and Gulp both run on a local NodeJS server. - You don’t need to know any NodeJS! - Install from here: nodejs.org - Easy to install (even on Windows)
  28. 28. Package.json - Keeps a list of dependencies we’re using. - Create a new one with: npm init
  29. 29. Tasks - Configure Grunt and Gulp with tasks. - Finding New Tasks: - Google ‘grunt’/‘gulp’ and the task. - Search http://npmjs.org
  30. 30. Adding a New Task - Everytime we add a new task, we should add it to package.json npm install example --save-dev
  31. 31. A very quick introduction to Grunt
  32. 32. Install Grunt CLI - Install Grunt Command Line Interface globally (so we can run grunt as a command) npm install -g grunt-cli
  33. 33. Install Grunt - Install Grunt to our project:
 
 - Use --save-dev to add it to package.json npm install grunt --save-dev
  34. 34. Creating a Gruntfile - Gruntfile.js module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), ! // Task configuration example: { devTask: {} } }); ! // Tell Grunt to load the plugins grunt.loadNpmTasks('grunt-example'); ! // Register a set of tasks to run grunt.registerTask('default', ['example']); };
  35. 35. Running Grunt - At the Command Line/Terminal: grunt
  36. 36. A very quick introduction to Gulp
  37. 37. Install Gulp - Install Gulp globally for command line and then locally for our package.json npm install -g gulp npm install gulp --save-dev
  38. 38. Creating a Gulpfile - Gulpfile.js 'use strict'; ! var gulp = require('gulp'); // Set variables to each required task/plugins var example = require('gulp-example'); ! gulp.task('example', function() { // Task configuration return gulp.src(‘/src/files') .pipe(something()) .pipe(gulp.dest(‘/dist/files')); }); ! // Register a set of tasks to run gulp.task(‘default', ['example']);
  39. 39. Running Gulp - At the Command Line/Terminal: gulp
  40. 40. bit.ly/1jPCxeN A More Detailed Introduction
  41. 41. Which to Use?
  42. 42. Which to Use? Easy to start with Stable 2000+ plugins Yeoman Support Slower than competitors. + + + + - Grunt
  43. 43. Which to Use? Fast No need to temp store files More like writing JavaScript Less mature than Grunt + + + - Gulp
  44. 44. Which to Use?
  45. 45. Your Choice - Checklist of requirements - Check tasks are available and working - Grunt is more mature, so less risk
  46. 46. Scaffold Your Workflow Get a head start with Yeoman ! yeoman.io
  47. 47. Generating a Base
  48. 48. Choosing a Base - yo webapp ! - yo assemble - yo firefox-os - yo phonegap - yo wordpress ! yeoman.io/community-generators.html
  49. 49. Customise! Credit: sailorusagichan.deviantart.com/art/Batmobile-Lawn-mower-310787147
  50. 50. Source !== Destination Don’t overwrite your work! src! - html - sass - img - javascript dest! - html - css (min) - img (optimised) - javascript (min)
  51. 51. Loading Tasks… grunt.loadNpmTasks(‘grunt-contrib-connect’); grunt.loadNpmTasks(‘grunt-contrib-clean’); grunt.loadNpmTasks(‘grunt-contrib-copy’); grunt.loadNpmTasks(‘grunt-contrib-sass’); grunt.loadNpmTasks(‘grunt-contrib-watch’); grunt.loadNpmTasks(‘grunt-autoprefixer');
  52. 52. npm install load-grunt-tasks Auto Load Tasks Load tasks from package.json npm install gulp-load-plugins
  53. 53. Auto Load Tasks (Grunt) grunt.loadNpmTasks(‘grunt-contrib-copy’); grunt.loadNpmTasks(‘grunt-contrib-watch’); grunt.loadNpmTasks(‘grunt-contrib-connect’); grunt.loadNpmTasks(‘grunt-autoprefixer'); grunt.loadNpmTasks('grunt-sass'); require('load-grunt-tasks')(grunt); Before: After:
  54. 54. Auto Load Tasks (Gulp) var connect = require(‘gulp-connect’); var jshint = require(‘gulp-jshint’); var concat = require(‘gulp-concat’); var plugins = require(‘gulp-load-plugins’)(); // plugins.jshint Before: After:
  55. 55. npm install grunt-contrib-connect Start a Local Server Host locally without additional software npm install gulp-connect
  56. 56. Start a Local Server connect: { dev: { options: { base: ‘./dest’, port: 4000 } } }, In Grunt:
  57. 57. Start a Local Server gulp.task(‘connect', connect.server({ root: ‘./dest’, port: 4000 }) ); In Gulp:
  58. 58. npm install time-grunt Workflow Performance Time your tasks npm install gulp-duration
  59. 59. Workflow Performance
  60. 60. npm install grunt-concurrent Make Grunt Faster Run tasks concurrently
  61. 61. Make Grunt Faster grunt.initConfig({ concurrent: { compile: ['coffee', 'sass'] } }); ! grunt.registerTask('default', ['concurrent:compile');
  62. 62. SETUP - Scaffold Your Workflow - Source !== Destination - Auto Load Tasks - Start a Local Server - Time your Tasks - Run Tasks Concurrently
  63. 63. DEVELOP
  64. 64. Performance Credit: Me!
  65. 65. Focus on Speed up/help dev Speed up workflow ! NOT concatenating or obfuscating code
  66. 66. Please Wait…
  67. 67. Don’t Wait!
  68. 68. Ask Yourselves What is the task? Do you need it? Do you really need it?
  69. 69. CSS Prefixes -moz-transition: -moz-transform 200ms; -ms-transition: -ms-transform 200ms; -o-transition: -o-transform 200ms; -webkit-transition: -webkit-transform 200ms; transition: transform 200ms;
  70. 70. npm install grunt-autoprefixer Use Autoprefixer Automatically add CSS vendor prefixes npm install gulp-autoprefixer
  71. 71. Use Autoprefixer border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; Source: Output:
  72. 72. Use Autoprefixer Especially awesome for: - CSS Gradients - Flexbox - Supporting ancient devices
  73. 73. npm install grunt-contrib-watch Watch & LiveReload Watch for changes and auto-refresh the browser gulp.watch
  74. 74. Watch & LiveReload Split your watch into smaller groups watch: { options: { livereload: true }, sass: { files: PATHS.SRC + PATHS.SASS + ‘{,*/}*.scss', tasks: [‘styles'] }, scripts: { files: PATHS.SRC + PATHS.JS + '{,*/}*.js', tasks: [‘scripts'] }
  75. 75. Globbing Performance images/**/*.{gif,jpg,png} images/{,*/}*.{gif,jpg,png} Before: After: More: bit.ly/1g2Rar8
  76. 76. Watch & LiveReload - Chrome:
 bit.ly/1ojCxVq - Firefox:
 bit.ly/1hs7yBT - Safari: 
 bit.ly/1sbwfcC
  77. 77. npm install grunt-newer Compile Changed Files Make compilation more efficient npm install gulp-changed
  78. 78. Compile Changed Files Prefix “newer:” to your task in Grunt. watch: { options: { livereload: true }, sass: { files: PATHS.SRC + PATHS.SASS + ‘{,*/}*.scss', tasks: [‘newer:styles’] }, scripts: { files: PATHS.SRC + PATHS.JS + '{,*/}*.js', tasks: [‘newer:scripts’] }
  79. 79. Compile Changed Files Add .pipe(changed(dest)) in Gulp gulp.src([PATHS.SRC + PATHS.SASS + '{,*/}*.scss']) .pipe(changed(PATHS.DEST + PATHS.SASS)) .pipe(sass())
  80. 80. Live Editing Our Files Make changes in the browser by setting up source maps sass: { options: { sourcemap: true, style: ‘compressed', trace: true }, dist: { ... } }
  81. 81. npm install grunt-responsive-images Grunt Responsive Images Resize images automatically for <picture> ! brew install graphicsmagick
  82. 82. Grunt Responsive Images responsive_images: { images: { options: { sizes: [{ height: 320, name: “small", width: 400 }, { height: 768, name: “medium", width: 1024 }, { height: 980, name: “large", width: 1280 }] }, files: [{ ... }] },
  83. 83. DEVELOP - Autoprefixer - Watch & LiveReload - Improve your Globbing Performance - Newer/Changed files - Live editing CSS/JavaScript - Grunt Responsive Images
  84. 84. BUILD
  85. 85. For build & release
  86. 86. For build & release - Slower, optimisation tasks. - Make sure you test a build with these tasks before go-live!
  87. 87. npm install grunt-usemin UseMin Compile CSS/JS and replace references in HTML. npm install gulp-usemin
  88. 88. UseMin <!-- build:css /css/main.min.css --> <link rel="stylesheet" href=“/css/main.css" /> <link rel="stylesheet" href=“/css/carousel.css" /> <link rel="stylesheet" href=“/css/forum.css" /> <!-- endbuild --> HTML:
  89. 89. UseMin grunt.registerTask('minify', [ ‘useminPrepare', ‘concat', ‘cssmin', ‘uglify', ‘usemin' ]); Grunt file:
  90. 90. UseMin <link rel="stylesheet" href=“/css/main.min.css” /> Output:
  91. 91. h1 { margin: 10px; @media screen and (min-width: 800px) { margin: 20px; } } ! p { font-size: 1.2em; @media screen and (min-width: 800px) { font-size: 1.4em; } } Sass: Combine Media Queries
  92. 92. h1 { margin: 10px; } ! @media screen and (min-width: 800px) { h1 { margin: 20px; } } ! p { font-size: 1.2em; } ! @media screen and (min-width: 800px) { p { font-size: 1.4em; } } CSS: Combine Media Queries
  93. 93. npm install grunt-combine-media-queries Combine Media Queries Reduce file size with 1 media query per breakpoint npm install gulp-combine-media-queries
  94. 94. h1 { margin: 10px; } p { font-size: 1.2em; } ! @media screen and (min-width: 800px) { h1 { margin: 20px; } p { font-size: 1.4em; } } After: Combine Media Queries
  95. 95. npm install grunt-uncss UnCss Remove unused CSS npm install gulp-uncss
  96. 96. npm install grunt-modernizr Streamline Modernizr Create at build time npm install gulp-modernizr
  97. 97. npm install grunt-imagemin Minify Your Images Reduce image file size npm install gulp-imagemin
  98. 98. npm install grunt-contrib-compress Compress Your Files Reduce your file size so your users download less. npm install gulp-gzip
  99. 99. npm install grunt-zopfli Zopfli Improved compression, but slower. brew install zopfli npm install gulp-zopfli
  100. 100. Shrinkwrap Lock your task dependencies. ! npm shrinkwrap
  101. 101. BUILD - UseMin - Combine Media Queries - Remove Unused CSS - Streamline Modernizr - Minify Your Images - Compress - Shrinkwrap Your Dependencies
  102. 102.
  103. 103. That’s a lot of things! Credit: flickr.com/photos/jason-samfield/5654182142
  104. 104. Is it? - Most require minimal setup. - Avoid mistaeks.
  105. 105. But… - Don’t include tasks you don’t need. - Don’t obsess over the perfect workflow!
  106. 106. Remember… - Tasks to help you at Develop. - Tasks to help the user at Build.
  107. 107. A better workflow SETUP DEVELOP BUILD
  108. 108. PERFECT?
  109. 109. Sample CSS Workflow Sass Compliation Watch Autoprefixer Combine Media Queries UseMin Live Editing UnCSS Newer Build Develop Compress
  110. 110. Sample JS Workflow JSHint Watch Compress Live Editing Modernizr Newer Build Develop UseMin
  111. 111. A better workflow SETUP DEVELOP BUILD
  112. 112. THANKS @andismith - Slides/Blog:
 http://j.mp/qftpw - My site:
 http://andismith.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×