Chapter 12. Automating optimization with gulp

 

This chapter covers

  • Understanding how gulp works and why you should use it
  • Structuring your project for use with gulp
  • Installing gulp plugins
  • Understanding how gulp tasks work
  • Writing tasks for your project
  • Testing your gulp-based build system on a client’s website

The worst part of optimizing your website for performance is the sheer repetitiveness of it. Minify this CSS, uglify that JavaScript, optimize those images, and so on. The prospect of doing all of this important (yet mind-numbing) work puts a damper on your enthusiasm for the job.

Thankfully, there’s a tool out there that automates all of these tedious tasks for you, and its name is gulp (http://gulpjs.com). gulp is a Node-based build system that makes your workflow much more efficient and saves you time.

In this chapter, you’ll learn about gulp and how it works. You’ll create a folder structure that works best for using gulp with your front-end development project. Once this structure is defined, you’ll install the gulp plugins required for automating your optimization tasks.

12.1. Introducing gulp

12.2. Laying down the foundations

12.3. Writing gulp tasks

12.4. Going a little further with gulp plugins

12.5. Summary