Introduction to Gulp.js 9: Checking the Syntax of SCSS and JavaScript

Stefan Imhoff

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.

Girl drinking a Big Gulp
Shelly Munkberg, 5.16.07

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:


source ""

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:


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.


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)


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)


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.