How to use Gulp with Symfony2

In this video we take everything we have already learned and look at how we can use Gulp with Symfony2.

The good news is, there is nothing complicated or difficult about this - it's all about applying everything you have already learned in the previous videos.

The thing that makes this work easily is that it doesn't depend on your directory structure being a certain way. It's going to work no matter how you have set up your bundle(s).

The secret sauce is the use of the wildcard:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('our-sass-task', function () {
  gulp.src('./src/**/*.scss')
      .pipe(sass().on('error', sass.logError())
      .pipe(/* other things here */)
      .pipe(gulp.dest('./web/css'))
  ;
}

That little wildcard path ('./src/**/*.scss') is what tells the computer to look at your folder structure however many levels deep, and find any file that has the .scss extension.

Then, with what we have already learned about Gulp, we can process our SASS, turning it into CSS without us having to really do anything.

This is amazing.

Pretty much what makes me love computers. A task that otherwise would be highly tedius (and ahem, not get done), is now done for us, free of charge.

At This Stage

By now you should be comfortable with Gulp.

If all you have done so far is sit and watch that videos then now would be a great time to put this in to practice.

Take a couple of hours and implement what you have seen.

It will hopefully open up your eyes to some new possibilities, and let you quickly get back to the code, rather than endlessly fannying about with the config. Nobody likes that. Code. Code code code. Mmmmm lovely code.

In the next video we will look at how to take Gulp from being fine for small projects, and see how we can modularise our Gulp setup to make things more manageable at scale.