The Quest for the Perfect Workflow

@andismith

About Me

Andi Smith Technical Architect@ AKQA!

- andismith.com- devtoolsecrets.com- @andismith

The Perfect Experience

- For our users- For us?

The Challenge

Find the perfect workflow

Did I Succeed?

- Well, no.

- One size does not fit all.

The Perfect Workflow?

Depends on your requirements.

Project Requirements

It needs to be content editable.

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

@andismith

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@andismith

Choose a Task Runner

Credit: flickr.com/photos/nomadic_lass/6970307781/

Task Runners

bit.ly/1jPCxeN

Intro to Task Runners

Which to Use?

Which to Use?

Easy to start withStable2000+ pluginsYeoman SupportSlower than competitors.

++++-

Grunt

Which to Use?

FastNo need to temp store filesLess mature than Grunt

++!

-Gulp

Your Choice

- Checklist of requirements- Check tasks are available

and working- Grunt is more mature, so

less risk

Scaffold Your WorkflowGet 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-generators.html

Customise!

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

Source !== Destination

Don’t overwrite your work!

src!- html - css - javascript - sass

dest!- html - css (min) - javascript (min)

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

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.loadNpmTasks(‘grunt-contrib-connect’); grunt.loadNpmTasks(‘grunt-autoprefixer'); grunt.loadNpmTasks('grunt-sass');

require('load-grunt-tasks')(grunt);

Before:

After:

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:

npm installgrunt-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 Fastergrunt.initConfig({ concurrent: { compile: ['coffee', 'sass'] } }); !grunt.registerTask('default', ['concurrent:compile');

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

DEVELOP@andismith

Performance

Credit: Me!

Focus on

Speed up/help devSpeed up workflow!

NOT concatenating or obfuscating code

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; -webkit-transition: -webkit-transform 200ms; transition: 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:

Output:

npm installgrunt-contrib-watch

Watch & LiveReload

Watch for changes and auto-refresh the browser

gulp.watch

Watch & LiveReload

Split your watch into smaller groupswatch: { options: { livereload: true }, sass: { files: PATHS.SRC + PATHS.SASS + ‘{,*/}*.scss', tasks: [‘styles'] }, scripts: { files: PATHS.SRC + PATHS.JS + '{,*/}*.js', tasks: [‘scripts'] }

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.SRC + PATHS.SASS + ‘{,*/}*.scss', tasks: [‘newer:styles’] }, scripts: { files: PATHS.SRC + PATHS.JS + '{,*/}*.js', tasks: [‘newer:scripts’] }

Compile Changed Files

Add .pipe(changed(dest)) in Gulpgulp.src([PATHS.SRC + PATHS.SASS + '{,*/}*.scss']) .pipe(changed(PATHS.DEST + PATHS.SASS)) .pipe(sass())

Live Editing Our FilesMake changes in the browser by setting up source mapssass: { options: { sourcemap: true, style: ‘compressed', trace: true }, dist: { ... } }

Live Editing Our FilesEnable source maps in Chrome Developer Tools settings

Live Editing Our FilesAllow Developer Tools to access your source in Settings, Workspace

Live Editing Our FilesMap our CSS file to our SASS file.

Live Editing Our FilesCSS Style Inspector shows line numbers

npm install grunt-responsive-images

Grunt Responsive Images

Resize images automatically for <picture>!

brew install graphicsmagick

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

DEVELOP- Autoprefixer- Watch & LiveReload- Improve your Globbing

Performance- Newer/Changed files- Live editing CSS/JavaScript- Grunt Responsive Images

BUILD@andismith

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.css --> <link rel="stylesheet" href=“/css/main.css" /> <link rel="stylesheet" href=“/css/carousel.css" /> <link rel="stylesheet" href=“/css/forum.css" /> <!-- endbuild -->

HTML:

UseMin

grunt.registerTask('minify', [ ‘useminPrepare', ‘concat', ‘cssmin', ‘uglify', ‘usemin' ]);

Grunt file:

npm installgrunt-combine-media-queries

Combine Media Queries

Reduce file size with 1 media query per breakpoint

npm installgulp-combine-media-queries

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

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

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

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-gzip

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- Shrinkwrap Your Dependencies

…

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.

A better workflow

SETUP

DEVELOP

BUILD

PERFECT?@andismith

Sample CSS WorkflowSass Compliation

Watch

Autoprefixer

Combine Media Queries

UseMin

Live EditingUnCSS

Newer

Build

Develop

Compress

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