Quest for the Perfect Workflow for McrFRED

@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 much anything you can think of!

- Copying- Test Runners- Uglification

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: nodejs.org- Easy to install (even on Windows)

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://npmjs.org

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

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

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 install gulp --save-dev

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

Running Gulp

- At the Command Line/Terminal:gulp

bit.ly/1jPCxeN

A More Detailed Introduction

Which to Use?

Which to Use?Easy to start withStable2000+ pluginsYeoman SupportSlower than competitors.

++++-

Grunt

Which to Use?FastNo need to temp store filesMore like writing JavaScriptLess 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 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 - sass - img - javascript

dest!- html - css (min) - img (optimised) - 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

Performance

Credit: Me!

Focus on

Speed up/help devSpeed 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; -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:

Use Autoprefixer

Especially awesome for:- CSS Gradients- Flexbox- Supporting ancient devices

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 Gulp

gulp.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: { ... } }

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

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

HTML:

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

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