CODEWITHSUNDEEP
javascriptgulp
Nad G
Nad G

Reputation: 517

Is there a gulp watch alternative that compiles sass only when the scss file is saved?

I'm looking for an alternative to the 'gulp watch' task that compiles scss only when I save the scss file. Is there any?

I'm asking this because when gulp watch is 'kept alive' in my prompt, it incredibily slows down my computer when i start to modify things in my scss file.

Sorry if this is a noob question but I'm new to Gulp!

My gulpfile.js looks like this: 

var gulp = require('gulp');  
var sass = require('gulp-sass');

//style paths
var sassFiles = 'sass/**/*.scss',  
    cssDest = 'css/';

gulp.task('styles', function(){  
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch',function() {  
    gulp.watch(sassFiles,['styles']);
});

Upvotes: 1

Views: 1646

Answers (1)

lofihelsinki
lofihelsinki

Reputation: 2571

In your example, all scss files are compiled every time one file is changed. This might slow things down.

If you want to compile only the changed scss file, you'll need to do it like this.

gulp.task('watch', function() {  
    gulp.watch(sassFiles, function(obj) {
        return gulp.src(obj.path)
           .pipe(sass().on('error', sass.logError))
           .pipe(gulp.dest(cssDest));
    });
});

Upvotes: 1

Related Questions