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 "https://rubygems.org"

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

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'
}
gulp/config.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)
    .pipe(scsslint(config.options));
});
gulp/tasks/development/scss-lint.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));
});
gulp/tasks/development/jshint.js

Source Code

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.

Related Articles

Comments