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

08.

Sourcemaps only in Development

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $6.00

Previous Chapter

Next Chapter

When we deploy, we're going to pass --production so that everything is minified like this. But when I do that, I don't want the sourcemaps to be there anymore. It's not a huge deal, but I'd rather not advertise my source files.

So now we have the opposite problem as before: we want to only run the sourcemaps when we're not in production. Add another config value called sourcemaps and set it to be not production:

            Copy Code

                            Show All Lines

                        31 lines
            |
            gulpfile.js
        
                Show Lines

                                                    // ... lines 1 - 8
                            
            var config = {
        
                Show Lines

                                                    // ... lines 10 - 12
                            
                sourceMaps: !util.env.production
        
            };
        
                Show Lines

                                                    // ... lines 15 - 31

Make sense?

We can use this to only run the two sourcemaps line if config.sourcemaps is true. Instead of using util.noop() again, I want to show you another plugin called gulp-if. Go back and find it on the plugins page. Let's get this guy installed:

npm install gulp-if --save-dev

Go back and grab the require line:

            Copy Code

                            Show All Lines

                        31 lines
            |
            gulpfile.js
        
            var gulp = require('gulp');
        
                Show Lines

                                                    // ... lines 2 - 6
                            
            var gulpif = require('gulp-if');
        
                Show Lines

                                                    // ... lines 8 - 31

The whole point of this plugin is to help with the fact that we can't break up the pipe chain with if statements. With it, you can add gulpif() inside pipe(). The first argument is the condition to test - so config.sourcemaps. And if that's true, we'll call sourcemaps.init(). Do the same thing down for sourcemaps.write(): gulpif, config.sourcemaps, then sourcemaps.write('.'):

            Copy Code

                            Show All Lines

                        31 lines
            |
            gulpfile.js
        
                Show Lines

                                                    // ... lines 1 - 16
                            
                gulp.src(config.assetsDir+'/'+config.sassPattern)
        
                    .pipe(gulpif(config.sourceMaps, sourcemaps.init()))
        
                Show Lines

                                                    // ... lines 19 - 21
                            
                    .pipe(gulpif(config.sourceMaps, sourcemaps.write('.')))
        
                Show Lines

                                                    // ... lines 23 - 31

That pipe chain is off the hook! Go back and run just gulp:

gulp

We should see the non-minified version with sourcemaps. And that's what we've got! Now add --production:

gulp --production

No more sourcemaps!

6 Comments

Sort By

Nikolay M. 6 years ago

Hi Ryan,

First of all - a big thank you for all tutorials and especially this one, it is helping me a lot!

I'm trying to create a file _variables.scss which should hold all the global colors, mixins and stuff like this. What is the right approach of using these variables into the layout.scss file without gulp throwing the below error
Error: app/Resources/assets/sass/layout.scss
Error: Undefined variable: "$primary-color".

I have googled a bit and found that I should do:
@import "variables" into the layout.scss
but it seems(to me) that this is the lame way of using variables is SCSS so could you please let me know if there is any other way of using variables like the above described way?

Wish you a nice day ahead!

| Reply |

Victor SFCASTS Nikolay M. 6 years ago

Hey Nikolay,

Glad this tutorial is useful for you! So if you have a file with all declared variables, and you want to use them in another SCSS file - yes, you have to import it there *before* start using those variables, otherwise it's not clear where those variables are declared for the process that parses your SCSS content. So, importing files in SCSS files is totally OK.

Cheers!

1 | Reply |

Nikolay M. Victor 6 years ago edited

Hi Victor,

Thank you very much for the answer! Could you please let me know if I'm on the right way here. I have the below folder structure


|-- styles.scss
|-- layout.scss
`-- variables-site
    `-- _variables-site.scss

into styles.scss I have the following:

@import "variables-site/variables-site";
@import "layout";

and again I get this error:
Error: Undefined variable: "$primary-color".

EDIT (03-12.2018): really sorry for the spam but I have found where is the issue with my code and folder structure. The idea is to have folders for each structure element like layout, mixins, variables, etc... and then into the styles.scss to have each of these imported. This way the gulp file will compile only the styles.scss file in the correct order and will not touch the folders.

Hope this would help in any way the other subscribers :)

| Reply |

Victor SFCASTS Nikolay M. 6 years ago

Hey Niki,

Don't worry about spamming us with questions ;) I'm glad you found the solution!

Cheers!

| Reply |

Richie Hamburg 6 years ago

If I want to use bootstrap mixins in my stylesheet (css is now a scss) by importing bootstrap.scss eg

@import "../../../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

I get all sorts of errors (below). (intellij)

Q1: Why cant I import "/vendor/bower_components.." ? It says file not found. Is there someway to configure the "root" for imports?
Q2: what is the correct approach to making my style.css a style.scss which imports bootstrap.scss? Do I need to copy (recursively the bootstrap-sass files)? If so how to do this recursively? This is not recursive. How to modify the app.copy function?

app.copy (
config.bowerDir+'/bootstrap-sass/assets/stylesheets/*',
'app/Resources/assets/sass'
);

This might be a bit confusing but I suspect my confused ramblings might be understood by your experienced self!

errors involvoing sourcemaps when using a scss file which import bootstrap.scss:

/home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-generator.js:277
throw new Error('Invalid mapping: ' + JSON.stringify({
^

Error: Invalid mapping: {"generated":{"line":10903,"column":17},"source":"../../../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss","original":{"line":14,"column":-13},"name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-generator.js:277:13)
at SourceMapGenerator_addMapping [as addMapping] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-generator.js:101:12)
at /home/rgr/development/gitprojects/vollfilm-new/node_modules/concat-with-sourcemaps/index.js:60:28
at Array.forEach (native)
at SourceMapConsumer_eachMapping [as eachMapping] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-consumer.js:155:14)
at Concat.add (/home/rgr/development/gitprojects/vollfilm-new/node_modules/concat-with-sourcemaps/index.js:58:18)
at DestroyableTransform.bufferContents [as _transform] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/gulp-concat/index.js:68:12)
at DestroyableTransform.Transform._read (/home/rgr/development/gitprojects/vollfilm-new/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
at DestroyableTransform.Transform._write (/home/rgr/development/gitprojects/vollfilm-new/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
at doWrite (/home/rgr/development/gitprojects/vollfilm-new/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:338:64)
r

| Reply |

weaverryan SFCASTS Richie Hamburg 6 years ago edited

Hi Richie Hamburg!

Sorry for my slow reply! And I'm afraid you give me too much credit - this is a tough one! I have not experienced this issue before, but it looks like you're not alone: https://discourse.roots.io/... and https://github.com/sass/nod.... Unfortunately, it doesn't look like there's a "for sure" workaround :/. You could of course compile your Bootstrap SASS into CSS and then include the bootstrap CSS in your gulpfile, but it's kind of a bummer.

Here on KnpU, we've actually migrated to webpack, which we're very happy with. Unfortunately, our tutorial on it - http://knpuniversity.com/sc... - hasn't been released yet. There's also a tool that will come out pretty soon to make webpack easier to work with. I know, that's not that helpful - it's a lot of "we use webpack, but things that make it easier aren't ready yet". But soon!

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 only in Development

Share this awesome video!

Keep on Learning!

6 Comments

Delete comment?

What PHP libraries does this tutorial use?

Show Lines	// ... lines 1 - 8
	var config = {
Show Lines	// ... lines 10 - 12
	sourceMaps: !util.env.production
	};
Show Lines	// ... lines 15 - 31

	var gulp = require('gulp');
Show Lines	// ... lines 2 - 6
	var gulpif = require('gulp-if');
Show Lines	// ... lines 8 - 31

Show Lines	// ... lines 1 - 16
	gulp.src(config.assetsDir+'/'+config.sassPattern)
	.pipe(gulpif(config.sourceMaps, sourcemaps.init()))
Show Lines	// ... lines 19 - 21
	.pipe(gulpif(config.sourceMaps, sourcemaps.write('.')))
Show Lines	// ... lines 23 - 31