Quest for the Perfect Workflow for McrFRED
-
Upload
andi-smith -
Category
Technology
-
view
325 -
download
4
Transcript of Quest for the Perfect Workflow for McrFRED
![Page 1: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/1.jpg)
@andismith@Mcr_FRED
![Page 2: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/2.jpg)
About Me
Andi Smith!Technical Architect @ AKQA!!
- @andismith
![Page 6: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/6.jpg)
The Perfect Experience
- For our users- For us?
![Page 7: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/7.jpg)
The Challenge
Find the perfect workflow
![Page 8: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/8.jpg)
London
Manchester
![Page 9: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/9.jpg)
Train Station
TechHub
![Page 10: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/10.jpg)
![Page 11: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/11.jpg)
![Page 12: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/12.jpg)
Did I Succeed?
- Well, no.
- One size does not fit all.
![Page 13: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/13.jpg)
The Perfect Workflow?
Depends on your requirements.
![Page 14: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/14.jpg)
Project Requirements
It needs to run as a web app.
![Page 15: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/15.jpg)
Client Requirements
It needs to use our current CMS.
![Page 16: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/16.jpg)
Hosting Requirements
It will be hosted in a Java environment.
![Page 17: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/17.jpg)
Your Requirements
I’d prefer to use Sass over LESS.
![Page 18: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/18.jpg)
IMPROVE
![Page 19: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/19.jpg)
Points to Consider
- Less repetition- Less errors- Better performance
![Page 22: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/22.jpg)
How?!
SETUP
DEVELOP
BUILD
![Page 23: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/23.jpg)
SETUP
![Page 24: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/24.jpg)
Choose a Task Runner
Credit: flickr.com/photos/nomadic_lass/6970307781/
![Page 25: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/25.jpg)
Task Runners
![Page 26: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/26.jpg)
What is a Task Runner?
- Give it a list of tasks.- It does them for you.- Runs on the Command Line.
![Page 27: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/27.jpg)
What Kind of Tasks?
- Concatentation- Minification- JSHint- Image Optimisation- LESS/Sass Compliation- Pretty much anything you can think of!
- Copying- Test Runners- Uglification
![Page 28: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/28.jpg)
A very quick introduction
Credit: hdwpapers.com
![Page 29: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/29.jpg)
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)
![Page 30: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/30.jpg)
Package.json
- Keeps a list of dependencies we’re using.
- Create a new one with:npm init
![Page 31: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/31.jpg)
![Page 32: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/32.jpg)
Tasks
- Configure Grunt and Gulp with tasks.- Finding New Tasks:- Google ‘grunt’/‘gulp’ and the task.- Search http://npmjs.org
![Page 33: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/33.jpg)
Adding a New Task
- Everytime we add a new task, we should add it to package.json
npm install example --save-dev
![Page 34: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/34.jpg)
A very quick introduction to Grunt
![Page 35: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/35.jpg)
Install Grunt CLI
- Install Grunt Command Line Interface globally (so we can run grunt as a command)
npm install -g grunt-cli
![Page 36: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/36.jpg)
Install Grunt
- Install Grunt to our project:
- Use --save-dev to add it to package.json
npm install grunt --save-dev
![Page 37: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/37.jpg)
![Page 38: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/38.jpg)
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']); };
![Page 39: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/39.jpg)
Running Grunt
- At the Command Line/Terminal:grunt
![Page 40: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/40.jpg)
A very quick introduction to Gulp
![Page 41: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/41.jpg)
Install Gulp
- Install Gulp globally for command line and then locally for our package.json
npm install -g gulp npm install gulp --save-dev
![Page 42: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/42.jpg)
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']);
![Page 43: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/43.jpg)
Running Gulp
- At the Command Line/Terminal:gulp
![Page 45: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/45.jpg)
Which to Use?
![Page 46: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/46.jpg)
Which to Use?Easy to start withStable2000+ pluginsYeoman SupportSlower than competitors.
++++-
Grunt
![Page 47: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/47.jpg)
Which to Use?FastNo need to temp store filesMore like writing JavaScriptLess mature than Grunt
+++-
Gulp
![Page 48: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/48.jpg)
Which to Use?
![Page 49: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/49.jpg)
Your Choice
- Checklist of requirements- Check tasks are available
and working- Grunt is more mature, so
less risk
![Page 50: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/50.jpg)
Scaffold Your WorkflowGet a head start with Yeoman!
yeoman.io
![Page 51: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/51.jpg)
Generating a Base
![Page 52: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/52.jpg)
Choosing a Base- yo webapp
!
- yo assemble- yo firefox-os- yo phonegap- yo wordpress!
yeoman.io/community-generators.html
![Page 53: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/53.jpg)
Customise!
Credit: sailorusagichan.deviantart.com/art/Batmobile-Lawn-mower-310787147
![Page 54: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/54.jpg)
Source !== Destination
Don’t overwrite your work!
src!- html - sass - img - javascript
dest!- html - css (min) - img (optimised) - javascript (min)
![Page 55: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/55.jpg)
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');
![Page 56: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/56.jpg)
npm install load-grunt-tasks
Auto Load Tasks
Load tasks from package.json
npm install gulp-load-plugins
![Page 57: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/57.jpg)
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:
![Page 58: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/58.jpg)
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:
![Page 59: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/59.jpg)
npm installgrunt-contrib-connect
Start a Local Server
Host locally without additional software
npm install gulp-connect
![Page 60: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/60.jpg)
Start a Local Server
connect: { dev: { options: { base: ‘./dest’, port: 4000 } } },
In Grunt:
![Page 61: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/61.jpg)
Start a Local Server
gulp.task(‘connect', connect.server({ root: ‘./dest’, port: 4000 }) );
In Gulp:
![Page 62: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/62.jpg)
npm install time-grunt
Workflow Performance
Time your tasks
npm install gulp-duration
![Page 63: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/63.jpg)
Workflow Performance
![Page 64: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/64.jpg)
npm install grunt-concurrent
Make Grunt Faster
Run tasks concurrently
![Page 65: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/65.jpg)
Make Grunt Fastergrunt.initConfig({ concurrent: { compile: ['coffee', 'sass'] } }); !
grunt.registerTask('default', ['concurrent:compile');
![Page 66: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/66.jpg)
SETUP- Scaffold Your Workflow- Source !== Destination- Auto Load Tasks- Start a Local Server- Time your Tasks- Run Tasks Concurrently
![Page 67: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/67.jpg)
DEVELOP
![Page 68: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/68.jpg)
Performance
Credit: Me!
![Page 69: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/69.jpg)
Focus on
Speed up/help devSpeed up workflow!
NOT concatenating or obfuscating code
![Page 70: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/70.jpg)
Please Wait…
![Page 71: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/71.jpg)
Don’t Wait!
![Page 72: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/72.jpg)
Ask Yourselves
What is the task?Do you need it?Do you really need it?
![Page 73: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/73.jpg)
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;
![Page 74: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/74.jpg)
npm install grunt-autoprefixer
Use Autoprefixer
Automatically add CSS vendor prefixes
npm install gulp-autoprefixer
![Page 75: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/75.jpg)
Use Autoprefixer
border-radius: 2px;
-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
Source:
Output:
![Page 76: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/76.jpg)
Use Autoprefixer
Especially awesome for:- CSS Gradients- Flexbox- Supporting ancient devices
![Page 77: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/77.jpg)
npm installgrunt-contrib-watch
Watch & LiveReload
Watch for changes and auto-refresh the browser
gulp.watch
![Page 78: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/78.jpg)
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'] }
![Page 79: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/79.jpg)
Globbing Performance
images/**/*.{gif,jpg,png}
images/{,*/}*.{gif,jpg,png}
Before:
After:
More: bit.ly/1g2Rar8
![Page 80: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/80.jpg)
Watch & LiveReload- Chrome:
bit.ly/1ojCxVq- Firefox:
bit.ly/1hs7yBT- Safari:
bit.ly/1sbwfcC
![Page 81: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/81.jpg)
npm install grunt-newer
Compile Changed Files
Make compilation more efficient
npm install gulp-changed
![Page 82: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/82.jpg)
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’] }
![Page 83: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/83.jpg)
Compile Changed Files
Add .pipe(changed(dest)) in Gulp
gulp.src([PATHS.SRC + PATHS.SASS + '{,*/}*.scss']) .pipe(changed(PATHS.DEST + PATHS.SASS)) .pipe(sass())
![Page 84: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/84.jpg)
Live Editing Our FilesMake changes in the browser by setting up source mapssass: { options: { sourcemap: true, style: ‘compressed', trace: true }, dist: { ... } }
![Page 85: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/85.jpg)
![Page 86: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/86.jpg)
npm install grunt-responsive-images
Grunt Responsive Images
Resize images automatically for <picture>!
brew install graphicsmagick
![Page 87: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/87.jpg)
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: [{ ... }] },
![Page 88: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/88.jpg)
DEVELOP- Autoprefixer- Watch & LiveReload- Improve your Globbing Performance- Newer/Changed files- Live editing CSS/JavaScript- Grunt Responsive Images
![Page 89: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/89.jpg)
BUILD
![Page 90: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/90.jpg)
For build & release
![Page 91: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/91.jpg)
For build & release- Slower, optimisation tasks.- Make sure you test a build with
these tasks before go-live!
![Page 92: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/92.jpg)
npm install grunt-usemin
UseMin
Compile CSS/JS and replace references in HTML.
npm install gulp-usemin
![Page 93: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/93.jpg)
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:
![Page 94: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/94.jpg)
UseMin
grunt.registerTask('minify', [ ‘useminPrepare', ‘concat', ‘cssmin', ‘uglify', ‘usemin' ]);
Grunt file:
![Page 95: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/95.jpg)
UseMin
<link rel="stylesheet" href=“/css/main.min.css” />
Output:
![Page 96: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/96.jpg)
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
![Page 97: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/97.jpg)
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
![Page 98: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/98.jpg)
npm installgrunt-combine-media-queries
Combine Media Queries
Reduce file size with 1 media query per breakpoint
npm installgulp-combine-media-queries
![Page 99: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/99.jpg)
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
![Page 100: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/100.jpg)
npm install grunt-uncss
UnCss
Remove unused CSS
npm install gulp-uncss
![Page 101: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/101.jpg)
npm install grunt-modernizr
Streamline Modernizr
Create at build time
npm install gulp-modernizr
![Page 102: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/102.jpg)
npm install grunt-imagemin
Minify Your Images
Reduce image file size
npm install gulp-imagemin
![Page 103: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/103.jpg)
npm install grunt-contrib-compress
Compress Your Files
Reduce your file size so your users download less.
npm install gulp-gzip
![Page 104: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/104.jpg)
npm install grunt-zopfli
Zopfli
Improved compression, but slower.brew install zopfli
npm install gulp-zopfli
![Page 105: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/105.jpg)
Shrinkwrap
Lock your task dependencies.!
npm shrinkwrap
![Page 106: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/106.jpg)
BUILD- UseMin- Combine Media Queries- Remove Unused CSS- Streamline Modernizr- Minify Your Images- Compress- Shrinkwrap Your Dependencies
![Page 107: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/107.jpg)
…
![Page 108: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/108.jpg)
That’s a lot of things!
Credit: flickr.com/photos/jason-samfield/5654182142
![Page 109: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/109.jpg)
Is it?
- Most require minimal setup.- Avoid mistaeks.
![Page 110: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/110.jpg)
But…
- Don’t include tasks you don’t need.- Don’t obsess over the perfect
workflow!
![Page 111: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/111.jpg)
Remember…
- Tasks to help you at Develop.- Tasks to help the user at Build.
![Page 112: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/112.jpg)
A better workflow
SETUP
DEVELOP
BUILD
![Page 113: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/113.jpg)
PERFECT?
![Page 114: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/114.jpg)
Sample CSS WorkflowSass Compliation
Watch
Autoprefixer
Combine Media Queries
UseMin
Live EditingUnCSS
Newer
Build
Develop
Compress
![Page 115: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/115.jpg)
Sample JS Workflow
JSHint
Watch
Compress
Live Editing
Modernizr
Newer Build
Develop
UseMin
![Page 116: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/116.jpg)
A better workflow
SETUP
DEVELOP
BUILD
![Page 117: Quest for the Perfect Workflow for McrFRED](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f644eb4c905c8088b4c5a/html5/thumbnails/117.jpg)
THANKS
@andismith
- Slides/Blog:http://j.mp/qftpw
- My site:http://andismith.com