Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Quest for the Perfect Workflow

8,789 views

Published on

Improve your development environment as we take a look at optimising your setup in search of the perfect workflow.

In a world where web development is evolving rapidly with features such as responsive design and pre-processors demanding more from our jobs with the same deadlines, wouldn’t it be great if we could use tools to speed up our workflow?

From selecting the right Grunt and Gulp tasks to live editing directly in the browser to using Yeoman generators, this session will give your workflow a new lease of life.

Published in: Technology
  • Be the first to comment

The Quest for the Perfect Workflow

  1. 1. @andismith
  2. 2. About Me Andi Smith Technical Architect @ AKQA ! - andismith.com - devtoolsecrets.com - @andismith
  3. 3. The Perfect Experience - For our users - For us?
  4. 4. The Challenge Find the perfect workflow
  5. 5. Did I Succeed? - Well, no.
 - One size does not fit all.
  6. 6. The Perfect Workflow? Depends on your requirements.
  7. 7. Project Requirements It needs to be content editable.
  8. 8. Client Requirements It needs to use our current CMS.
  9. 9. Hosting Requirements It will be hosted in a Java environment.
  10. 10. Your Requirements I’d prefer to use Sass over LESS.
  11. 11. IMPROVE @andismith
  12. 12. Points to Consider - Less repetition - Less errors - Better performance
  13. 13. Automation = More Fun! Credit: giphy.com/gifs/tscu52qG7VbwI
  14. 14. Less Pain! Credit: giphy.com/gifs/XOxay70W2WHbq
  15. 15. How?! SETUP DEVELOP BUILD
  16. 16. SETUP @andismith
  17. 17. Choose a Task Runner Credit: flickr.com/photos/nomadic_lass/6970307781/
  18. 18. Task Runners
  19. 19. bit.ly/1jPCxeN Intro to Task Runners
  20. 20. Which to Use?
  21. 21. Which to Use? Easy to start with Stable 2000+ plugins Yeoman Support Slower than competitors. + + + + - Grunt
  22. 22. Which to Use? Fast No need to temp store files Less mature than Grunt + + ! - Gulp
  23. 23. Your Choice - Checklist of requirements - Check tasks are available and working - Grunt is more mature, so less risk
  24. 24. Scaffold Your Workflow Get a head start with Yeoman ! yeoman.io
  25. 25. Generating a Base
  26. 26. Choosing a Base - yo webapp ! - yo assemble - yo firefox-os - yo phonegap - yo wordpress ! yeoman.io/community-generators.html
  27. 27. Customise! Credit: sailorusagichan.deviantart.com/art/Batmobile-Lawn-mower-310787147
  28. 28. Source !== Destination Don’t overwrite your work! src! - html - css - javascript - sass dest! - html - css (min) - javascript (min)
  29. 29. 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');
  30. 30. npm install load-grunt-tasks Auto Load Tasks Load tasks from package.json npm install gulp-load-plugins
  31. 31. 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:
  32. 32. 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:
  33. 33. npm install grunt-contrib-connect Start a Local Server Host locally without additional software npm install gulp-connect
  34. 34. Start a Local Server connect: { dev: { options: { base: ‘./dest’, port: 4000 } } }, In Grunt:
  35. 35. Start a Local Server gulp.task(‘connect', connect.server({ root: ‘./dest’, port: 4000 }) ); In Gulp:
  36. 36. npm install time-grunt Workflow Performance Time your tasks npm install gulp-duration
  37. 37. Workflow Performance
  38. 38. npm install grunt-concurrent Make Grunt Faster Run tasks concurrently
  39. 39. Make Grunt Faster grunt.initConfig({ concurrent: { compile: ['coffee', 'sass'] } }); ! grunt.registerTask('default', ['concurrent:compile');
  40. 40. SETUP - Scaffold Your Workflow - Source !== Destination - Auto Load Tasks - Start a Local Server - Time your Tasks - Run Tasks Concurrently
  41. 41. DEVELOP @andismith
  42. 42. Performance Credit: Me!
  43. 43. Focus on Speed up/help dev Speed up workflow ! NOT concatenating or obfuscating code
  44. 44. Ask Yourselves What is the task? Do you need it? Do you really need it?
  45. 45. 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;
  46. 46. npm install grunt-autoprefixer Use Autoprefixer Automatically add CSS vendor prefixes npm install gulp-autoprefixer
  47. 47. Use Autoprefixer border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; Source: Output:
  48. 48. npm install grunt-contrib-watch Watch & LiveReload Watch for changes and auto-refresh the browser gulp.watch
  49. 49. Watch & LiveReload Split your watch into smaller groups watch: { options: { livereload: true }, sass: { files: PATHS.SRC + PATHS.SASS + ‘{,*/}*.scss', tasks: [‘styles'] }, scripts: { files: PATHS.SRC + PATHS.JS + '{,*/}*.js', tasks: [‘scripts'] }
  50. 50. Globbing Performance images/**/*.{gif,jpg,png} images/{,*/}*.{gif,jpg,png} Before: After: More: bit.ly/1g2Rar8
  51. 51. Watch & LiveReload - Chrome:
 bit.ly/1ojCxVq - Firefox:
 bit.ly/1hs7yBT - Safari: 
 bit.ly/1sbwfcC
  52. 52. npm install grunt-newer Compile Changed Files Make compilation more efficient npm install gulp-changed
  53. 53. 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’] }
  54. 54. Compile Changed Files Add .pipe(changed(dest)) in Gulp gulp.src([PATHS.SRC + PATHS.SASS + '{,*/}*.scss']) .pipe(changed(PATHS.DEST + PATHS.SASS)) .pipe(sass())
  55. 55. Live Editing Our Files Make changes in the browser by setting up source maps sass: { options: { sourcemap: true, style: ‘compressed', trace: true }, dist: { ... } }
  56. 56. Live Editing Our Files Enable source maps in Chrome Developer Tools settings
  57. 57. Live Editing Our Files Allow Developer Tools to access your source in Settings, Workspace
  58. 58. Live Editing Our Files Map our CSS file to our SASS file.
  59. 59. Live Editing Our Files CSS Style Inspector shows line numbers
  60. 60. npm install grunt-responsive-images Grunt Responsive Images Resize images automatically for <picture> ! brew install graphicsmagick
  61. 61. 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: [{ ... }] },
  62. 62. DEVELOP - Autoprefixer - Watch & LiveReload - Improve your Globbing Performance - Newer/Changed files - Live editing CSS/JavaScript - Grunt Responsive Images
  63. 63. BUILD @andismith
  64. 64. For build & release - Slower, optimisation tasks. - Make sure you test a build with these tasks before go-live!
  65. 65. npm install grunt-usemin UseMin Compile CSS/JS and replace references in HTML. npm install gulp-usemin
  66. 66. 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:
  67. 67. UseMin grunt.registerTask('minify', [ ‘useminPrepare', ‘concat', ‘cssmin', ‘uglify', ‘usemin' ]); Grunt file:
  68. 68. npm install grunt-combine-media-queries Combine Media Queries Reduce file size with 1 media query per breakpoint npm install gulp-combine-media-queries
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. npm install grunt-uncss UnCss Remove unused CSS npm install gulp-uncss
  73. 73. npm install grunt-modernizr Streamline Modernizr Create at build time npm install gulp-modernizr
  74. 74. npm install grunt-imagemin Minify Your Images Reduce image file size npm install gulp-imagemin
  75. 75. npm install grunt-contrib-compress Compress Your Files Reduce your file size so your users download less. npm install gulp-gzip
  76. 76. npm install grunt-zopfli Zopfli Improved compression, but slower. brew install zopfli npm install gulp-zopfli
  77. 77. Shrinkwrap Lock your task dependencies. ! npm shrinkwrap
  78. 78. BUILD - UseMin - Combine Media Queries - Remove Unused CSS - Streamline Modernizr - Minify Your Images - Compress - Shrinkwrap Your Dependencies
  79. 79.
  80. 80. That’s a lot of things! Credit: flickr.com/photos/jason-samfield/5654182142
  81. 81. Is it? - Most require minimal setup. - Avoid mistaeks.
  82. 82. But… - Don’t include tasks you don’t need.
  83. 83. A better workflow SETUP DEVELOP BUILD
  84. 84. PERFECT? @andismith
  85. 85. Sample CSS Workflow Sass Compliation Watch Autoprefixer Combine Media Queries UseMin Live Editing UnCSS Newer Build Develop Compress
  86. 86. Sample JS Workflow JSHint Watch Compress Live Editing Modernizr Newer Build Develop UseMin
  87. 87. A better workflow SETUP DEVELOP BUILD
  88. 88. THANKS @andismith - Slides/Blog:
 http://j.mp/qftpw - My site:
 http://andismith.com

×