This tutorial has a new version, check it out!

Sourcemaps

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Check out the source style.scss file. We're giving an element a fancy cursive font on lines 4 and 5. And that's what makes the Dinosaurs text look so awesome.

But if we inspect that element, it says the font is coming from styles.css line 2. Dang it! The browser is looking at the final, processed file. And that means that debugging CSS is going to be an absolute nightmare.

What I really want is the debugger to be smart enough to tell me that this font is coming from our styles.scss file at line 4. Such mysterious magic goodness exists, and it's called a sourcemap.

Using gulp-sourcemaps

Like with everything, this works via a plugin. Head back to the plugins page and search for gulp-sourcemaps. There's the one I want!

Step 1 is always the same - install with npm. So:

npm install gulp-sourcemaps --save-dev

Awesome! Next, copy the require statement and put that on top:

12 lines gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
... lines 4 - 12

This plugin is great. First, activate it before piping through any filters that may change which line some code lives on. So, before the sass() line, use pipe() with sourcemaps.init() inside. Then after all those filters are done, pipe it again through sourcemaps.write('.'):

12 lines gulpfile.js
... lines 1 - 4
gulp.task('default', function() {
gulp.src('app/Resources/assets/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('web/css'));
});

Ok, let's try it! At the terminal, run gulp... and hope for the best!

gulp

Cool - no errors. And now, the generated styles.css has a neighboring file: styles.css.map! That's what the . did - it told Gulp to put the map file right in the same directory as styles.css, and the browser knows to look there.

Time to refresh the page again. Inspect the element again. Now it says the font comes from styles.scss on line 4. This is a huge deal guys. We can do whatever weird processing we want and not worry about killing our debugging.

Sourcemaps Support

Of course, this all works because gulp-sourcemaps and gulp-sass work together like super friends. If you look at the sourcemaps docs, they have a link on their wiki to a list of all super-friend gulp plugins that play nice with it. We'll use a couple of these later.

Leave a comment!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=5.3.3",
        "symfony/symfony": "2.6.*", // v2.6.4
        "doctrine/orm": "~2.2,>=2.2.3", // v2.4.6
        "doctrine/doctrine-bundle": "~1.2", // v1.2.0
        "twig/extensions": "~1.0", // v1.2.0
        "symfony/assetic-bundle": "~2.3", // v2.5.0
        "symfony/swiftmailer-bundle": "~2.3", // v2.3.7
        "symfony/monolog-bundle": "~2.4", // v2.6.1
        "sensio/distribution-bundle": "~3.0", // v3.0.9
        "sensio/framework-extra-bundle": "~3.0", // v3.0.3
        "incenteev/composer-parameter-handler": "~2.0", // v2.1.0
        "hautelook/alice-bundle": "~0.2" // 0.2
    },
    "require-dev": {
        "sensio/generator-bundle": "~2.3" // v2.4.0
    }
}