Introduction to Gulp.js 09: 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 kind of 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 some 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 some 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 sytax 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.