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

.sass-lint.yml

@@ -0,0 +1,29 @@
+options:
+  merge-default-rules: true
+
+rules:
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+  mixins-before-declarations:
+    - 2
+    -
+      exclude:
+        - media
+  no-warn: 1
+  no-debug: 1
+  no-ids: 1
+  no-important: 2
+  hex-notation:
+    - 2
+    -
+      style: uppercase
+  indentation:
+    - 2
+    -
+      size: 2
+  leading-zero: 0
+  nesting-depth: 0
+  property-sort-order: 0
+  shorthand-values: 0
+  variable-for-property: 0

gulpfile.babel.js

@@ -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']

package.json

@@ -6,7 +6,7 @@
     "node": "5.0.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "gulp lint",
     "postinstall": "./node_modules/bower/bin/bower install",
     "build": "gulp",
     "watch": "gulp watch"
@@ -35,5 +35,11 @@
     "gulp-uglify": "1.5.1",
     "jquery": "1.11.2",
     "query-command-supported": "1.0.0"
+  },
+  "devDependencies": {
+    "gulp-jshint": "2.0.0",
+    "gulp-sass-lint": "1.1.1",
+    "jshint": "2.9.1",
+    "jshint-stylish": "2.1.0"
   }
 }

scripts/run_tests.sh

@@ -25,9 +25,12 @@ function display_result {
 pep8 .
 display_result $? 1 "Code style check"
 
+npm test
+display_result $? 2 "Front end code style check"
+
 ## Code coverage
 #py.test --cov=app tests/
-#display_result $? 2 "Code coverage"
+#display_result $? 3 "Code coverage"
 
 py.test -v
-display_result $? 3 "Unit tests"
+display_result $? 4 "Unit tests"