Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

SymfonyCasts

Gulp! Refreshment for Your Frontend Assets

via SymfonyCasts

Overview

NOTE We now recommend using Webpack instead of Gulp. And, we have a shiny tutorial all about it: https://knpuniversity.com/screencast/javascript-webpack

We all need to minify and combine our CSS and JS files. And with Gulp, this is not only easy, but it's actually fun to do!

In this tutorial, I'll show you how to setup Gulp in your PHP or Symfony project to do a bunch of things:

  • Minify CSS and JS files
  • Watch files for changes
  • Combine files
  • Use sourcemaps
  • Publish Font files
  • Have page-specific CSS/JS files
  • Cache-bust with versioning

We'll actually use Laravel's Elixir as a guide, but make things work for any PHP project and learn how we can make Gulp do whatever we need.

Yay!

Syllabus

  • Your First Gulp
  • Sass to CSS
  • Sourcemaps
  • Watch for Changes
  • Combining (concat) Files
  • Minify
  • Minify only in Production
  • Sourcemaps only in Development
  • gulp-load-plugins
  • Errors: Call the Plumber
  • Page Specific CSS
  • Bower Components out of web
  • Minify and Combine JavaScript
  • Publish Fonts to web
  • Versioning to Bust Cache
  • JavaScript Versioning and Cleanup
  • on('end'): Async and Listeners
  • Task Order

Taught by

Ryan Weaver and Leanna Pelham

Reviews

Start your review of Gulp! Refreshment for Your Frontend Assets

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.