Embed Size (px)
Citation preview
@andismith@Mcr_FRED
About Me
Andi Smith!Technical Architect @ AKQA!!
- @andismith
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
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
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
