Add linting for SASS and Javascript

Similar to how PEP8 enforces Python style, there are tools for front end code:
- jshint[1] for Javascript
- sass-lint[2] for SASS

This commit adds the Gulp plugins for both, and sets up some sensible rules
(which can be iterated on).

It also adds a command to `./scripts/run_tests.sh`, so that any errors in the
front end code will fail the build before it has a chance to be deployed.

1. http://jshint.com/
2. https://www.npmjs.com/package/sass-lint
This commit is contained in:
Chris Hill-Scott
2016-02-08 11:05:07 +00:00
parent 4338bc9aaf
commit 0201825c45
4 changed files with 60 additions and 3 deletions

View File

@@ -7,6 +7,7 @@
// - - - - - - - - - - - - - - -
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')(),
stylish = require('jshint-stylish'),
// 2. CONFIGURATION
// - - - - - - - - - - - - - - -
@@ -83,6 +84,24 @@ gulp.task('watchForChanges', function() {
gulp.watch(paths.src + 'images/**/*', ['images']);
});
gulp.task('lint:sass', () => gulp
.src(paths.src + '/stylesheets/**/*.scss')
.pipe(plugins.sassLint())
.pipe(plugins.sassLint.format(stylish))
.pipe(plugins.sassLint.failOnError())
);
gulp.task('lint:js', () => gulp
.src(paths.src + 'javascripts/**/*.js')
.pipe(plugins.jshint({'esversion': 6, 'esnext': false}))
.pipe(plugins.jshint.reporter(stylish))
.pipe(plugins.jshint.reporter('fail'))
);
gulp.task('lint',
['lint:sass', 'lint:js']
);
// Default: compile everything
gulp.task('default',
['copy:govuk_template:template', 'copy:govuk_template:assets', 'javascripts', 'sass', 'images']