Improve your development environment as we take a look at optimising your setup in search of the perfect workflow. In a world where web development is evolving rapidly with features such as responsive design and pre-processors demanding more from our jobs with the same deadlines, wouldn’t it be great if we could use tools to speed up our workflow? From selecting the right Grunt and Gulp tasks to live editing directly in the browser to using Yeoman generators, this session will give your workflow a new lease of life.

1. @andismith

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

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

4. The Challenge
Find the perfect workflow

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

9. The Perfect Workflow?
Depends on your
requirements.

10. Project Requirements
It needs to be
content editable.

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

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

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

14. IMPROVE
@andismith

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

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

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

18. How?!
SETUP
DEVELOP
BUILD

19. SETUP
@andismith

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

21. Task Runners

22. bit.ly/1jPCxeN
Intro to Task Runners

23. Which to Use?

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

25. Which to Use?
Fast
No need to temp
store files
Less mature than
Grunt
+
+
!
-
Gulp

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

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

28. Generating a Base

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

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

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

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

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

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

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

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

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

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

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

40. Workflow Performance

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

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

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

44. DEVELOP
@andismith

45. Performance
Credit: Me!

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

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

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

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

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

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

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

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

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

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

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

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

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

60. Live Editing Our Files
Enable source maps in Chrome
Developer Tools settings

61. Live Editing Our Files
Allow Developer Tools to access
your source in Settings,
Workspace

62. Live Editing Our Files
Map our CSS file to our SASS file.

63. Live Editing Our Files
CSS Style Inspector shows line
numbers

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

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

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

67. BUILD
@andismith

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

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

70. UseMin
<!-- build:css /css/main.css -->
<link rel="stylesheet" href=“/css/main.css" />
<link rel="stylesheet" href=“/css/carousel.css" />
<link rel="stylesheet" href=“/css/forum.css" />
<!-- endbuild -->
HTML:

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

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

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

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

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

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

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

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

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

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

81. Shrinkwrap
Lock your task
dependencies.
!
npm shrinkwrap

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

83. …

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

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

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

87. A better workflow
SETUP
DEVELOP
BUILD

88. PERFECT?
@andismith

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

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

91. A better workflow
SETUP
DEVELOP
BUILD

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