Validation of Sass

sage
1

Hi,

I am novice in Gulp that is why I want to ask:
how can I add “automatically checking SCSS/CSS code for errors” in gulp watch.
Which package should I install and how should I config my gulpfile.js?

I tried gulp-scss-lint.

npm install gulp-scss-lint --save-dev

I added to my gulpfile.js code:

var scsslint = require('gulp-scss-lint');
...
gulp.task('scss-lint', function() {
    gulp.src(path.source + 'styles/*.scss')
    .pipe(scsslint({
        'endless': true
    }));
});
...
gulp.task('watch', function() {
    browserSync.init({
        files: ['{lib,templates}/**/*.php', '*.php'],
        proxy: config.devUrl,
        snippetOptions: {
            whitelist: ['/wp-admin/admin-ajax.php'],
            blacklist: ['/wp-admin/**']
        }
    });
    gulp.watch(path.source + 'styles/*.scss', ['scss-lint']); // line added by me
    gulp.watch([path.source + 'styles/**/*'], ['styles']);
    gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
    gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
    gulp.watch([path.source + 'images/**/*'], ['images']);
    gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
});

but when I run gulp watch and I change something in some SCSS file I got error:
“Name ‘scss-lint’ is not recognized…”

regards
Marcin

2

Pretty sure you have to return the stream in gulp.task

return gulp.src(....

3

I changed:

gulp.task('scss-lint', function() {
    return gulp.src(path.source + 'styles/*.scss')
        .pipe(scsslint({
            'endless': true
        }));
});

but I have still the same error.