1. @andismith@Mcr_FRED

2. About Me
Andi Smith!
Technical Architect @ AKQA!
!
- @andismith

3. www.devtoolsecrets.com

4. www.akqa.com

5. www.andismith.com

6. The Perfect Experience
- For our users
- For us?

7. The Challenge
Find the perfect workflow

8. London
Manchester

9. Train Station
TechHub

12. Did I Succeed?
- Well, no.
- One size does not fit all.

13. The Perfect Workflow?
Depends on your
requirements.

14. Project Requirements
It needs to run as a
web app.

15. Client Requirements
It needs to use our
current CMS.

16. Hosting Requirements
It will be hosted in a
Java environment.

17. Your Requirements
I’d prefer to use
Sass over LESS.

18. IMPROVE

19. Points to Consider
- Less repetition
- Less errors
- Better performance

20. Automation = More Fun!
Credit: giphy.com/gifs/tscu52qG7VbwI

21. Less Pain!
Credit: giphy.com/gifs/XOxay70W2WHbq

22. How?!
SETUP
DEVELOP
BUILD

23. SETUP

24. Choose a Task Runner
Credit: flickr.com/photos/nomadic_lass/6970307781/

25. Task Runners

26. What is a Task Runner?
- Give it a list of tasks.
- It does them for you.
- Runs on the Command Line.

27. What Kind of Tasks?
- Concatentation
- Minification
- JSHint
- Image Optimisation
- LESS/Sass Compliation
- Pretty much anything you can think of!
- Copying
- Test Runners
- Uglification

28. A very quick introduction
Credit: hdwpapers.com

29. 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)

30. Package.json
- Keeps a list of dependencies we’re
using.
- Create a new one with:
npm init

32. Tasks
- Configure Grunt and Gulp with tasks.
- Finding New Tasks:
- Google ‘grunt’/‘gulp’ and the task.
- Search http://npmjs.org

33. Adding a New Task
- Everytime we add a new task, we
should add it to package.json
npm install example --save-dev

34. A very quick introduction to Grunt

35. Install Grunt CLI
- Install Grunt Command Line Interface
globally (so we can run grunt as a
command)
npm install -g grunt-cli

36. Install Grunt
- Install Grunt to our project:
- Use --save-dev to add it to
package.json
npm install grunt --save-dev

38. 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']);
};

39. Running Grunt
- At the Command Line/Terminal:
grunt

40. A very quick introduction to Gulp

41. Install Gulp
- Install Gulp globally for command line
and then locally for our package.json
npm install -g gulp
npm install gulp --save-dev

42. 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']);

43. Running Gulp
- At the Command Line/Terminal:
gulp

44. bit.ly/1jPCxeN
A More Detailed Introduction

45. Which to Use?

46. Which to Use?
Easy to start with
Stable
2000+ plugins
Yeoman Support
Slower than competitors.
+
+
+
+
-
Grunt

47. Which to Use?
Fast
No need to temp store files
More like writing JavaScript
Less mature than Grunt
+
+
+
-
Gulp

48. Which to Use?

49. Your Choice
- Checklist of requirements
- Check tasks are available
and working
- Grunt is more mature, so
less risk

50. Scaffold Your Workflow
Get a head start
with Yeoman
!
yeoman.io

51. Generating a Base

52. Choosing a Base
- yo webapp
!
- yo assemble
- yo firefox-os
- yo phonegap
- yo wordpress
!
yeoman.io/community-generators.html

53. Customise!
Credit: sailorusagichan.deviantart.com/art/Batmobile-Lawn-mower-310787147

54. Source !== Destination
Don’t overwrite your work!
src!
- html
- sass
- img
- javascript
dest!
- html
- css (min)
- img (optimised)
- javascript (min)

55. 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');

56. npm install load-grunt-tasks
Auto Load Tasks
Load tasks from package.json
npm install gulp-load-plugins

57. 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:

58. 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:

59. npm install
grunt-contrib-connect
Start a Local Server
Host locally without
additional software
npm install gulp-connect

60. Start a Local Server
connect: {
dev: {
options: {
base: ‘./dest’,
port: 4000
}
}
},
In Grunt:

61. Start a Local Server
gulp.task(‘connect',
connect.server({
root: ‘./dest’,
port: 4000
})
);
In Gulp:

62. npm install time-grunt
Workflow Performance
Time your tasks
npm install gulp-duration

63. Workflow Performance

64. npm install grunt-concurrent
Make Grunt Faster
Run tasks concurrently

65. Make Grunt Faster
grunt.initConfig({
concurrent: {
compile: ['coffee', 'sass']
}
});
!
grunt.registerTask('default',
['concurrent:compile');

66. SETUP
- Scaffold Your Workflow
- Source !== Destination
- Auto Load Tasks
- Start a Local Server
- Time your Tasks
- Run Tasks Concurrently

67. DEVELOP

68. Performance
Credit: Me!

69. Focus on
Speed up/help dev
Speed up workflow
!
NOT concatenating or
obfuscating code

70. Please Wait…

71. Don’t Wait!

72. Ask Yourselves
What is the task?
Do you need it?
Do you really need it?

73. 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;

74. npm install grunt-autoprefixer
Use Autoprefixer
Automatically add CSS
vendor prefixes
npm install gulp-autoprefixer

75. Use Autoprefixer
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
Source:
Output:

76. Use Autoprefixer
Especially awesome for:
- CSS Gradients
- Flexbox
- Supporting ancient devices

77. npm install
grunt-contrib-watch
Watch & LiveReload
Watch for changes and
auto-refresh the browser
gulp.watch

78. 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'] }

79. Globbing Performance
images/**/*.{gif,jpg,png}
images/{,*/}*.{gif,jpg,png}
Before:
After:
More: bit.ly/1g2Rar8

80. Watch & LiveReload
- Chrome:
bit.ly/1ojCxVq
- Firefox:
bit.ly/1hs7yBT
- Safari:
bit.ly/1sbwfcC

81. npm install grunt-newer
Compile Changed Files
Make compilation more efficient
npm install gulp-changed

82. 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’] }

83. Compile Changed Files
Add .pipe(changed(dest)) in Gulp
gulp.src([PATHS.SRC + PATHS.SASS + '{,*/}*.scss'])
.pipe(changed(PATHS.DEST + PATHS.SASS))
.pipe(sass())

84. Live Editing Our Files
Make changes in the browser by
setting up source maps
sass: {
options: {
sourcemap: true,
style: ‘compressed',
trace: true
},
dist: {
...
}
}

86. npm install grunt-responsive-images
Grunt Responsive Images
Resize images
automatically for <picture>
!
brew install graphicsmagick

87. 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: [{
...
}]
},

88. DEVELOP
- Autoprefixer
- Watch & LiveReload
- Improve your Globbing Performance
- Newer/Changed files
- Live editing CSS/JavaScript
- Grunt Responsive Images

89. BUILD

90. For build & release

91. For build & release
- Slower, optimisation tasks.
- Make sure you test a build with
these tasks before go-live!

92. npm install grunt-usemin
UseMin
Compile CSS/JS and replace
references in HTML.
npm install gulp-usemin

93. 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:

94. UseMin
grunt.registerTask('minify', [
‘useminPrepare',
‘concat',
‘cssmin',
‘uglify',
‘usemin'
]);
Grunt file:

95. UseMin
<link rel="stylesheet" href=“/css/main.min.css” />
Output:

96. 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

97. 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

98. npm install
grunt-combine-media-queries
Combine Media Queries
Reduce file size with 1
media query per breakpoint
npm install
gulp-combine-media-queries

99. 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

100. npm install grunt-uncss
UnCss
Remove unused CSS
npm install gulp-uncss

101. npm install grunt-modernizr
Streamline Modernizr
Create at build time
npm install gulp-modernizr

102. npm install grunt-imagemin
Minify Your Images
Reduce image file size
npm install gulp-imagemin

103. npm install grunt-contrib-compress
Compress Your Files
Reduce your file size so
your users download less.
npm install gulp-gzip

104. npm install grunt-zopfli
Zopfli
Improved compression, but
slower.
brew install zopfli
npm install gulp-zopfli

105. Shrinkwrap
Lock your task
dependencies.
!
npm shrinkwrap

106. BUILD
- UseMin
- Combine Media Queries
- Remove Unused CSS
- Streamline Modernizr
- Minify Your Images
- Compress
- Shrinkwrap Your Dependencies

107. …

108. That’s a lot of things!
Credit: flickr.com/photos/jason-samfield/5654182142

109. Is it?
- Most require minimal setup.
- Avoid mistaeks.

110. But…
- Don’t include tasks you don’t need.
- Don’t obsess over the perfect
workflow!

111. Remember…
- Tasks to help you at Develop.
- Tasks to help the user at Build.

112. A better workflow
SETUP
DEVELOP
BUILD

113. PERFECT?

114. Sample CSS Workflow
Sass Compliation
Watch
Autoprefixer
Combine Media
Queries
UseMin
Live Editing
UnCSS
Newer
Build
Develop
Compress

115. Sample JS Workflow
JSHint
Watch
Compress
Live Editing
Modernizr
Newer
Build
Develop
UseMin

116. A better workflow
SETUP
DEVELOP
BUILD

117. THANKS
@andismith
- Slides/Blog:
http://j.mp/qftpw
- My site:
http://andismith.com