Chapters

18 Chapters | 1:11:28 |

01

Your First Gulp

4:31
02

Sass to CSS

4:46
03

Sourcemaps

2:46
04

Watch for Changes

3:57
05

Combining (concat) Files

2:57
06

Minify

1:29
07

Minify only in Production

3:04
08

Sourcemaps only in Development

2:04
09

gulp-load-plugins

2:11
10

Errors: Call the Plumber

1:47
11

Page Specific CSS

4:27
12

Bower Components out of web

3:47
13

Minify and Combine JavaScript

6:17
14

Publish Fonts to web

4:10
15

Versioning to Bust Cache

9:10
16

JavaScript Versioning and Cleanup

4:15
17

on('end'): Async and Listeners

6:05
18

Task Order

3:45

This tutorial has a new version, check it out!

> Gulp! Refreshment for Your Frontend Assets

Buy Access to Course

03.

Sourcemaps

Autoplay

Previous Chapter

Next Chapter

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:

            Copy Code

                            Show All Lines

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

                                                    // ... 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('.'):

            Copy Code

                            Show All Lines

                        12 lines
            |
            gulpfile.js
        
                Show Lines

                                                    // ... 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.

9 Comments

Sort By

Alan Rezende 6 years ago

Congratulations !!! Post simple, objective, direct and functional. No more posts like this one, rare thing!

| Reply |

edin 6 years ago

Whatever I do I can't make sourcemaps work as in the video.
Sourcemaps always gives me 'stdin' as style file, so when I inspect an element I see stdin and not source scss file.

| Reply |

weaverryan SFCASTS edin 6 years ago

Hey!

I don't remember seeing this problem originally, but I *can* see it now: the sourcemaps incorrectly thinks that the source of *some* selectors os stdin. For me, it looks like it works correctly for any source files that are .scss: the problem is only for source files that are true css files (e.g. bootstrap.css). Do you see the same thing? What I mean is, I can "Inspect Element" on a style that comes from an .scss file and it shows me the proper source. If I do the same for a style that comes originally from a CSS file, that's when I see the stdin.

Thanks!

| Reply |

weaverryan SFCASTS weaverryan 6 years ago

I opened an issue to track this problem: https://github.com/knpunive...

1 | Reply |

edin weaverryan 6 years ago

Ok cool.

| Reply |

edin weaverryan 6 years ago

Ryan,

For me it's the other way around: everything works as excepted with *.css files but not with scss files. I suspect it works with less too, but I havent fully tested this. I say this because including bootstrap.css with scss files does show source bootstrap less files.

For example, when I comment .pipe(plugins.sass()) from addStyle function and load css files sourcemaps work as expected.
Strangely, as soon as I use scss files (with .pipe(plugins.sass()) and write style it switches to stdin. To clearify:

In style.scss:
.some-dino-class {}
.some-other-thingie {}

works.

main.css.map gives: {"version":3,"sources":["bootstrap.css","font-awesome.css","layout.scss","style.scss"]....

When I do (with or without variables):

.some-dino-class {
font-size: bigger;
}
.some-other-thingie { color: red }

It breaks.
main.css.map gives: {"version":3,"sources":["bootstrap.css","font-awesome.css","../../../stdin","../../../stdin"]....

At first I thought it has something to do with my project (maybe I overlooked something), but I downloaded the course source files with same results.

| Reply |

weaverryan SFCASTS edin 6 years ago

I've got this on my list to look into - definitely not just your issue :)

| Reply |

Sandeep Dubey 6 years ago

do we have to link ".css.map" file in the html ?

| Reply |

Victor SFCASTS Sandeep Dubey 6 years ago

Hey Sandeep,

You don't have too, because this files needed only for debugging, i.e when you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file. But it's a good idea to link them, because your debugging experience will be easier.

Cheers!

| Reply |

Symfony 2

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
    }
}

Previous Chapter

Next Chapter

Sourcemaps

Share this awesome video!

Using gulp-sourcemaps

Sourcemaps Support

9 Comments

Delete comment?

What PHP libraries does this tutorial use?

	var gulp = require('gulp');
	var sass = require('gulp-sass');
	var sourcemaps = require('gulp-sourcemaps');
Show Lines	// ... lines 4 - 12

Show Lines	// ... 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'));
	});