SymfonyCasts stands united with the people of Ukraine
If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
With gulp running, when we update a file, the gulp-bots recompile stuff
for us. We're like a factory for CSS.
But there's a problem, a big problem if you're like me and mess up a lot.
Add a syntax error in layout.scss.
Now check out gulp. It exploded! It's not even running anymore. So even
if I fix the error, gulp is dead. I'll probably refresh my browser for
30 minutes before I realize that gulp hasn't been running this entire time.
And I'll spend the next 5 minutes composing an angry tweet.
Out of the box, Gulp supports error handlers where you say "Hey, instead
of exploding all crazy, just call this function over here." But instead,
I'll show you a really nice plugin called gulp-plumber that'll take care
of this for us.
Go look for gulp-plumber. Copy its handy install statement, and paste that to get it downloading.
npm install --save-dev gulp-plumber
Now, usually, this is where we'd go copy the require statement. But since
we added gulp-load-plugins, we can skip that!
Instead, let's get to work. We need to pipe gulp through this plugin before
any logic that might cause an error. So right after gulp.src, say
pipe(plugins.plumber()):
| ... lines 1 - 11 | |
| gulp.src(config.assetsDir+'/'+config.sassPattern) | |
| .pipe(plugins.plumber(function(error) { | |
| console.log(error.toString()); | |
| this.emit('end'); | |
| })) | |
| ... lines 17 - 18 | |
| .pipe(plugins.concat('main.css')) | |
| ... lines 20 - 30 |
Tip
The function(error) callback function was not shown in the video, but
should be included. This prevents an
issue when running gulp watch.
And yea, that's it. Go back and get gulp back and running:
gulp
Let's mess up layout.scss again! This time, gulp does show us the error,
it just doesn't die anymore. How nice! When we fix the error, it recompiles.
Robots, get back to work!
Tip
Plumber prevents gulp from throwing a proper error exit code. When building for
production, you may want a proper error. If so, try using plumber() only in
development:
.pipe(gulpif(!util.env.production, plumber(function(error) {
console.log(error.toString());
this.emit('end');
})))Thanks to Nicolas Sauveur for the tip!
Hi, I'm using @import and partials. When I make a syntax error in one of the partials it doesn't throw an error!! It only throws an error when it detects a syntax error in the main scss file... That's so bad, please help
Hey Marouane,
Try to add "use strict" at the top of the JS file, does it help you? See https://www.w3schools.com/j... for more information.
Cheers!
Hello Ryan,
Just ran into an issue. Plumber seems to prevent gulp to throw the correct exit code when the script fails. It is problematic when you build assets for production in a deployment workflow, and gulp fails silently.
So I now use : .pipe(gulpif(!util.env.production, plumber()))
Hey Nicolas!
I like it a lot - very good point. I've added a note at the bottom of this chapter - thanks for sharing!
Cheers!
// 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
}
}
This was one of those real "wow" days. How wonderful is gulp?