Today I spoke at jQuery UK on my quest to find the Perfect Workflow.

Unfortunately, we couldn’t fit everyone who wanted to come to the talk in the room. If you missed the talk, I’ve recorded this screencast. There’s more information below the video.

Part of my job as a Technical Architect is to make sure that projects start with the right set of base tools and the right workflow. But during my quest I realised that there is no such thing as a perfect workflow for everybody, because everyone’s requirements are different. We all use different tools and have different coding styles. And a workflow that enforces any rules that conflict with these requirements is going to get cursed from start to finish.

So my quest morphed in to looking in to ways how we can improve our workflow.

I started by splitting our workflow in to three sections to make sure that we are using the right tasks for the right part of project:

Setup, Develop and Build

• The Setup stage should focus on the foundations of our project
• The Develop stage should focus on performance, so that you can make changes to your site and see the results immediately.
• The Build stage should focus on file size optimisations, concatenation, minification .etc.

The tasks and tools I covered were:

Setup

• GruntJS
• GulpJS
• Yeoman
• Auto load tasks
  • Grunt - npm install load-grunt-tasks
  • Gulp - npm install gulp-load-plugins
• Start a local server
  • Grunt - npm install grunt-contrib-connect
  • Gulp - npm install gulp-connect
• Workflow Performance
  • Grunt - npm install time-grunt
  • Gulp - npm install gulp-duration
• Make Grunt Faster - npm install grunt-concurrent

Develop

• Use Autoprefixer
  • Grunt - npm install grunt-autoprefixer
  • Gulp - npm install gulp-autoprefixer
• Watch & LiveReload
  • Grunt - npm install grunt-contrib-watch
  • Gulp - gulp.watch
  • LiveReload extensions:
  • Chrome
  • Firefox
  • Safari
• Compile Changed Files
  • Grunt - npm install grunt-newer
  • Gulp - npm install gulp-changed
• Live Editing Our Files

Build

• Compile CSS/JS and replace references in HTML.
  • Grunt - npm install grunt-usemin
  • Gulp - npm install gulp-usemin
• Combine Media Queries
  • Grunt - npm install grunt-combine-media-queries
  • Gulp - npm install gulp-combine-media-queries
• UnCSS
  • Grunt - npm install grunt-uncss
  • Gulp - npm install gulp-uncss
• Streamline Modernizr
  • Grunt - npm install grunt-modernizr
  • Gulp - npm install gulp-modernizr
• Minify Images
  • Grunt - npm install grunt-imagemin
  • Gulp - npm install gulp-imagemin
• Compress Files
  • Grunt - npm install grunt-contrib-compress
  • Gulp - npm install gulp-gzip
• Compress Files with Zopfli
  • Grunt - npm install grunt-zopfli
  • Gulp - npm install gulp-zopfli
• Shrinkwrap - npm shrinkwrap

Thanks to everyone who came along to the talk today, I hope you found it useful! Please let me know your thoughts in the comments below, or @andismith on Twitter.