Fronteers — vakvereniging voor front-end developers

Fronteers 2015 workshop "Mastering Gulp Build Systems" by Wes Bos

Setting up your perfect build system

All modern websites and web applications require a build step in which we compile, compress and clean any code/assets in our project.

Gulp.js is a task runner that allows us to quickly create and customize build systems for any type of project. Whether you are building a Ruby on Rails application, creating an App in Angular.js or a website on WordPress, learning Gulp is an investment you need to make.

What you'll learn

This one day course will increase your web tooling workflow by taking a deep dive into Gulp.js. Not only will you be extremely comfortable with creating streaming build systems, you

The goals of this course are:

  • Full understanding of Gulp, with the ability to create totally customized build systems
  • Increased Developer Efficiency - build it once and have your tooling support you in solving problems rather than manual tasks
  • Creation of better, cleaner codebases
  • Faster loading websites, smaller overall footprints

CSS

  • Compiling Sass, Stylus or Less into CSS
  • Start using CSS4 features today CSS Next
  • Automatically prefixing CSS with Autoprefixer
  • Removing unused CSS from our projects

JavaScript

  • Start writing next-generation ECMAScript 6 features today and transpile into browser supported ES5 with Babel.js
  • Concatenate, Compress and Obfuscate JavaScript into a single file
  • Work with Sourcemaps for easy debugging on compressed and transpiled JavaScript files

Code Quality + Performance

  • Compress all your JPG, PNG and GIF files before launching a site
  • Inline SVG files for easy manipulation and fast loading
  • Run Linters on languages which check for coding errors

The Toolchain

  • Installing Node.js
  • Managing packages with NPM
  • Working with existing gulp build systems
  • Creating build systems from scratch
  • Selecting files with Globs
  • Working with Buffers and Streams

+ So much more

  • Live edit with BrowserSync to easily test, reload and sync website changes across multiple devices
  • Compile Jade or Haml templates and partials into HTML
  • Create watch that run when files are changed
  • Error Handling and Desktop Notifications
  • Writing your own Gulp.js Task

Prerequisites

This course will take you from beginner to expert. No previous experience in Gulp is needed. Since Gulpfiles are written in JavaScript, some experience with JavaScript is an asset.

Preparation

  • A computer running OSX, Windows or Linux is required.
  • A text editor - Sublime Text, TextMate, Coda, NotePad++, Vim...
  • iTerm2 or Terminal for Macs, Cmdr for Windows. Check out http://CommandLinePowerUser.com for some useful vids on getting comfortable in the terminal.
  • Node.js installed - download and use the installer at https://nodejs.org/

About Wes

Wes Bos

Wes Bos is an independent full stack JavaScript developer living in Hamilton, Canada where he works with startups and companies to build their products. Wes also works with HackerYou where he teaches web development topics ranging from CSS3 to AngularJS. He is passionate about the workflow and tooling surrounding building web sites and applications. You can find Wes' video tutorials at Wesbos.com and his latest book on Sublime Text at SublimeTextBook.com.