Shelly Munkberg, 5.16.07

Introduction to Gulp.js 9: Checking the Syntax 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

Add some options for jshint and scss-lint:

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.

gulp/tasks/development/scss-lint.js
gulp/tasks/development/jshint.js

Configuration of Syntax Check Tools

You may change the rules for linting SCSS or JavaScript by adding a hidden file .scss-lint.yml for SCSS lint and .jshintrc for JSHint to your project root.

To find out which options are available look into the documentation of SCSS-Lint and JSHint.

Source Code

View Source on GitHub

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.


This article was first published on stefanimhoff.de
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.