Languages
Pages
Legal
@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
How?!
SETUP
DEVELOP
BUILD
SETUP@andismith
Choose a Task Runner
Credit: flickr.com/photos/nomadic_lass/6970307781/
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
Top Related