Introduction to Gulp.js 9: Syntax-Check of SCSS and JavaScript

This is the 9th part of my series, Introduction to Gulp.js. Today, I will use Gulp.js to automatically check my SCSS and JavaScript files for syntax errors and warnings.

I decided to lint my SCSS files and not the CSS files because it’s pointless to lint generated CSS. But you can do this with gulp-csslint.

$ npm install --save-dev gulp-scss-lint@0.3.6 gulp-jshint@1.8.5 jshint-stylish@2.0.1

Additionally, you’ll need to install the scss-lint Gem and run bundle install:

Gemfile

source "https://rubygems.org"

gem 'jekyll', '~> 2.5.2'
gem 'sass', '>= 3.3'
gem 'scss-lint', '~> 0.31.0'
gem 'fontcustom', '~> 1.3.7'

Add the options for jshint and scss-lint:

gulp/config.js

scsslint: {
  src: [
    srcAssets + '/scss/**/*.{sass,scss}',
    '!' + srcAssets + '/scss/base/_sprites.scss',
    '!' + srcAssets + '/scss/helpers/_meyer-reset.scss'
    ],
    options: {
      bundleExec: true
    }
},
jshint: {
  src: srcAssets + '/javascripts/*.js'
}

I ignore files from checking (by adding a ! in front of the path) because I didn’t write them or don’t have control over the syntax.

gulp/tasks/development/scss-lint.js

var gulp = require("gulp");
var scsslint = require("gulp-scss-lint");
var config = require("../../config").scsslint;

/**
 * Lint SCSS files
 * `gem install scss-lint` needed
 */
gulp.task("scsslint", function () {
  return gulp.src(config.src).pipe(scsslint(config.options));
});

gulp/tasks/development/jshint.js

var gulp = require("gulp");
var jshint = require("gulp-jshint");
var stylish = require("jshint-stylish");
var config = require("../../config").jshint;

/**
 * Check JavaScript syntax with JSHint
 */
gulp.task("jshint", function () {
  return gulp.src(config.src).pipe(jshint()).pipe(jshint.reporter(stylish));
});

Conclusion

This concludes the 9th part of my series, Introduction to Gulp.js. Today, we learned how to use Gulp.js to check the syntax of SCSS and JavaScript files. This task will run continuously while I write my files and print out errors to my console the moment I created them.

View Source on GitHub