CODEWITHSUNDEEP
sassgulplint
mvidalgarcia
mvidalgarcia

Reputation: 558

Lint SASS in Gulp before compiling

I'm new at Gulp and I'm trying to lint scss files before compiling them in order to avoid gulp watcher breaking.

My gulpfile.js looks like this now:

gulp.task('default', ['watch']);

// Sass compilation to css
gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init()) // Process the original sources
    .pipe(sass())
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/css'));
});

// Configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('source/scss/**/*.scss', ['build-css']);
});

And when I enter a mistake in a scss file like: 

body {
    color: $non-existing-var;
}

The gulp watcher shows error info but stops watching cause gulp breaks its execution. How can I solve this?

Upvotes: 2

Views: 228

Answers (1)

avcajaraville
avcajaraville

Reputation: 9084

I will assume you are using gulp-sass pluging, if you are not using, I suggest you to do it. It is a wrapper over node-sass, which is the C version: super fast :)

On gulp-sass documentation, they already have you covered with one example, so your task should look like this:

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init()) // Process the original sources
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/css'));
});

Hope this helps you to accomplish what you are looking for :)

Upvotes: 2

Related Questions