Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Gulp Basics Improving your Gulp Task Pipelines Automatically Run Tasks with Gulp’s Watch Method

Posted by Benjamin Boruff
Benjamin Boruff
11,663 Points

gulp.watch exits when an error is detected by sass

There seems to be a known issue with gulp.watch when the task being executed on the watched files throws an error. Unless you type quickly, the watch task will exit. For example, in this video, if I am watching the scss files, and make a typo/error, then the watch task exits. There are some temp-fixes e.g. gulp.plumber, or using on.error(), but neither worked for me (using gulp version 3.9.0 on a Linux box). This is supposed to be fixed in gulp version 4.x. I have no idea why that didn't happen in this video, 'cuz Huston did make make a typo in the scss file, and fixed it, but gulp.watch didn't exit. Maybe he typed fast enough?

p.s. yes, I know watch is a gulp method, not a task; but it is running a task on the watched files, thus I say "watch task" :)

2 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Here is how I modified the compileSass gulp task from the videos so that it would not break on a typo in my Sass. It uses .on('error') but you should still try it. Some of the other "on error" code I found out there did not work for me, but this one did.

gulp.task("compileSass", function() {
    return gulp.src('src/scss/app.scss')
        .pipe(maps.init())
        .pipe(sass({
            includePaths: [
                './src/scss',
                config.bowerDir + 'foundation/scss'
            ]
        }).on('error', sass.logError))
        .pipe(prefix())
        .pipe(maps.write('./'))
        .pipe(gulp.dest('src/css'))
        .pipe(reload({stream:true}));
});
Benjamin Boruff
Benjamin Boruff
11,663 Points

That did it! I added:

.pipe(sass().on('error', sass.logError))

Now it keeps working despite the typos/errors. Thanks!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Great! All the other examples I saw had the "on error" attached to a different pipe and none of those worked for me.

Dan Farrell
Dan Farrell
4,124 Points
Dan Farrell
Dan Farrell
4,124 Points

Hi, I'm having trouble keeping my gulp watch command still running after a typo or error. I've tried the above method but it doesn't work for me. What am I doing wrong? Are there any plugins I need to have installed for this to work?

gulp.task("compileSass", function() {
    return gulp.src('_inc/sass/**/*.scss')
        .pipe(maps.init())
        .pipe(sass({
            includePaths: [
                './src/scss',
                config.bowerDir + 'foundation/scss'
            ]
        }).on('error', sass.logError))
        .pipe(prefix())
        .pipe(maps.write('./'))
        .pipe(gulp.dest('_inc/css'))
        .pipe(reload({stream:true}));
});

gulp.task('watch', function () {
    gulp.watch('_inc/sass/**/*.scss', ['compileSass']);
});