Use EcmaScript 6, w/ transpiling for compatibility

ES6 has some nice new features. Specifically relevant to this piece of
work are:

Arrow functions[1], whose `this` context is bound the value of `this` in the
current scope and can’t be overidden. The code is cleaner as a result, and
doesn’t need the addition of a bind polyfill for older browsers.

Template strings[2], which are similar to triple-quoted multi line strings in
Python. This means less fiddly and error-prone string concatenation.

This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript
written to the ES6 specification into code which is compatible with older
browsers that don’t understand ES6 syntax.

It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons.

1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings
3. https://babeljs.io

app/assets/javascripts/highlightTags.js

@@ -1,47 +1,39 @@
 (function(Modules) {
   "use strict";
 
+  const tagPattern = /\(\([^\)\(]+\)\)/g;
+
   Modules.HighlightTags = function() {
 
     this.start = function(textarea) {
 
       this.$textbox = $(textarea)
-        .wrap(
-          "<div class='textbox-highlight-wrapper' />"
-        )
-        .after(this.$backgroundMaskForeground = $(
-          "<div class='textbox-highlight-background' aria-hidden='true' />" +
-          "<div class='textbox-highlight-mask' aria-hidden='true' />" +
-          "<div class='textbox-highlight-foreground' aria-hidden='true' />"
-        ))
-        .on("input", this.update.bind(this))
-        .on("scroll", this.maintainScrollParity.bind(this));
+        .wrap(`
+          <div class='textbox-highlight-wrapper' />
+        `)
+        .after(this.$backgroundMaskForeground = $(`
+          <div class="textbox-highlight-background" aria-hidden="true" />
+          <div class="textbox-highlight-mask" aria-hidden="true" />
+          <div class="textbox-highlight-foreground" aria-hidden="true" />
+        `))
+        .on("input", this.update)
+        .on("scroll", this.maintainScrollParity);
 
       this.$textbox
         .trigger("input");
 
     };
 
-    this.update = function(event) {
-      this.$backgroundMaskForeground.html(
-        replaceTags(this.$textbox.val())
-      );
-    };
+    this.update = () => this.$backgroundMaskForeground.html(
+      this.$textbox.val().replace(
+        tagPattern, match => `<span class='tag'>${match}</span>`
+      )
+    );
 
-    this.maintainScrollParity = function() {
-      this.$backgroundMaskForeground.scrollTop(
-        this.$textbox.scrollTop()
-      );
-    };
+    this.maintainScrollParity = () => this.$backgroundMaskForeground.scrollTop(
+      this.$textbox.scrollTop()
+    );
 
   };
 
-  function replaceTag(match) {
-    return ("<span class='tag'>" + match + "</span>");
-  }
-
-  function replaceTags(content) {
-    return content.replace(/\(\([^\)\(]+\)\)/g, replaceTag);
-  }
-
 })(window.GOVUK.Modules);

app/assets/javascripts/main.js

@@ -1,8 +1 @@
-//= include ../../../bower_components/jquery/dist/jquery.js
-//= include ../govuk_frontend_toolkit/javascripts/govuk/modules.js
-
-//= include highlightTags.js
-
-$(function(){
-  GOVUK.modules.start();
-});
+$(() => GOVUK.modules.start());