Gulp! Refreshment for Your Frontend Assets

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!

• 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