Merge pull request #684 from uccser/issue/678

Load third party static files from NPM

.gitignore

@@ -95,6 +95,10 @@ ENV/
 # Installed node modules
 node_modules/
 
+# Ignore package-lock.json file as it's created within Dockerfile so outdates easily
+# TODO: Store this within repository and ensure it remains up to date
+package-lock.json
+
 # vim files
 *.swp
 *.swo

Dockerfile-local

@@ -18,5 +18,5 @@ COPY requirements /requirements
 RUN /docker_venv/bin/pip3 install -r /requirements/local.txt
 
 RUN mkdir /cs-field-guide/
-RUN mkdir /cs-field-guide/csfielguide/
+RUN mkdir /cs-field-guide/csfieldguide/
 WORKDIR /cs-field-guide/csfieldguide/

LICENCE-THIRD-PARTY

@@ -1,4 +1,4 @@
-the CS Field Guide uses third-party libraries or other resources that may
+The CS Field Guide uses third-party libraries or other resources that may
 be distributed under licenses different than the CS Field Guide license.
 
 A summary of all third-party licenses are listed below, with a full copy of

csfieldguide/gulpfile.js

@@ -2,33 +2,52 @@
 // gulp build --production : for a minified production build
 
 'use strict';
-var gulp = require('gulp');
-var gutil = require('gulp-util');
-var del = require('del');
-var gulpif = require('gulp-if');
-var exec = require('child_process').exec;
-var runSequence = require('run-sequence')
-var notify = require('gulp-notify');
-var buffer = require('vinyl-buffer');
-var argv = require('yargs').argv;
-var rename = require("gulp-rename");
+
+const js_files_skip_optimisation = [
+  // Optimise all files
+  '**',
+  // But skip the following files
+  '!static/interactives/huffman-tree/**/*.js',
+  '!static/interactives/packet-attack/**/*.js',
+  '!static/interactives/searching-algorithms/**/*.js',
+  '!static/interactives/sorting-algorithms/**/*.js',
+];
+
+// general
+const gulp = require('gulp');
+const gutil = require('gulp-util');
+const del = require('del');
+const gulpif = require('gulp-if');
+const filter = require('gulp-filter');
+const exec = require('child_process').exec;
+const runSequence = require('run-sequence')
+const notify = require('gulp-notify');
+const log = require('gulplog');
+const buffer = require('vinyl-buffer');
+const argv = require('yargs').argv;
+const rename = require("gulp-rename");
+const sourcemaps = require('gulp-sourcemaps');
+const errorHandler = require('gulp-error-handle');
 
 // sass
-var sass = require('gulp-sass');
-var postcss = require('gulp-postcss');
-var postcssFlexbugFixes = require('postcss-flexbugs-fixes');
-var autoprefixer = require('autoprefixer');
-var sourcemaps = require('gulp-sourcemaps');
+const sass = require('gulp-sass');
+const postcss = require('gulp-postcss');
+const postcssFlexbugFixes = require('postcss-flexbugs-fixes');
+const autoprefixer = require('autoprefixer');
 
-// linting
-var jshint = require('gulp-jshint');
-var stylish = require('jshint-stylish');
+// js
+const tap = require('gulp-tap');
+const babel = require('gulp-babel');
+const uglify = require('gulp-uglify');
+const browserify = require('browserify');
+const jshint = require('gulp-jshint');
+const stylish = require('jshint-stylish');
 
 // gulp build --production
-var production = !!argv.production;
+const production = !!argv.production;
 // determine if we're doing a build
 // and if so, bypass the livereload
-var build = argv._.length ? argv._[0] === 'build' : true;
+const build = argv._.length ? argv._[0] === 'build' : true;
 
 // ----------------------------
 // Error notification methods
@@ -58,6 +77,14 @@ var handleError = function(task) {
   };
 };
 
+function catchError(error) {
+    gutil.log(
+      gutil.colors.bgRed('Error:'),
+      gutil.colors.red(error)
+    );
+    this.emit('end');
+}
+
 // --------------------------
 // CUSTOM TASK METHODS
 // --------------------------
@@ -79,7 +106,11 @@ var tasks = {
   // Copy interactive files
   // --------------------------
   interactives: function() {
-    return gulp.src(['static/interactives/**/*', '!static/interactives/**/*.scss'])
+    return gulp.src([
+        'static/interactives/**/*',
+        '!static/interactives/**/*.scss',
+        '!static/interactives/**/*.js'
+      ])
       .pipe(gulp.dest('build/interactives'));
   },
   // --------------------------
@@ -104,49 +135,11 @@ var tasks = {
       .pipe(gulp.dest('build/css'));
   },
   // --------------------------
-  // JS
-  // --------------------------
-  js: function() {
-    return gulp.src('static/js/**/*.js')
-      .pipe(gulp.dest('build/js'));
-  },
-  // --------------------------
   // SASS (libsass)
   // --------------------------
   sass: function() {
-    return gulp.src('static/scss/*.scss')
-      // sourcemaps + sass + error handling
-      .pipe(gulpif(!production, sourcemaps.init()))
-      .pipe(sass({
-        sourceComments: !production,
-        outputStyle: production ? 'compressed' : 'nested'
-      }))
-      .on('error', handleError('SASS'))
-      // generate .maps
-      .pipe(gulpif(!production, sourcemaps.write({
-        'includeContent': false,
-        'sourceRoot': '.'
-      })))
-      // autoprefixer
-      .pipe(gulpif(!production, sourcemaps.init({
-        'loadMaps': true
-      })))
-      .pipe(postcss([autoprefixer({browsers: ['last 2 versions']}), postcssFlexbugFixes]))
-      // we don't serve the source files
-      // so include scss content inside the sourcemaps
-      .pipe(sourcemaps.write({
-        'includeContent': true
-      }))
-      // write sourcemaps to a specific directory
-      // give it a file and save
-      .pipe(gulp.dest('build/css'));
-  },
-  // --------------------------
-  // SASS (libsass) for interactives
-  // TODO: Remove duplication of logic in this file
-  // --------------------------
-  interactives_sass: function() {
-    return gulp.src('static/interactives/**/scss/*.scss')
+    return gulp.src('static/**/*.scss')
+      .pipe(errorHandler(catchError))
       // sourcemaps + sass + error handling
       .pipe(gulpif(!production, sourcemaps.init()))
       .pipe(sass({
@@ -164,29 +157,33 @@ var tasks = {
         'loadMaps': true
       })))
       .pipe(postcss([autoprefixer({browsers: ['last 2 versions']}), postcssFlexbugFixes]))
-      // we don't serve the source files
-      // so include scss content inside the sourcemaps
       .pipe(sourcemaps.write({
         'includeContent': true
       }))
       .pipe(rename(function (path) {
-        path.dirname = path.dirname.replace("/scss", "/css");
+        path.dirname = path.dirname.replace("scss", "css");
       }))
-      .pipe(gulp.dest('build/interactives'));
+      .pipe(gulp.dest('build/'));
   },
   // --------------------------
-  // linting
+  // JavaScript
   // --------------------------
-  lintjs: function() {
-    return gulp.src([
-        'gulpfile.js',
-        'static/js/index.js',
-        'static/js/**/*.js'
-      ]).pipe(jshint())
-      .pipe(jshint.reporter(stylish))
-      .on('error', function() {
-        beep();
-      });
+  js: function() {
+    const f = filter(js_files_skip_optimisation, {restore: true});
+    return gulp.src(['static/**/*.js', '!static/js/modules/**/*.js'])
+      .pipe(f)
+      .pipe(errorHandler(catchError))
+      .pipe(tap(function (file) {
+        file.contents = browserify(file.path, {debug: true}).bundle().on('error', catchError);
+      }))
+      .pipe(buffer())
+      .pipe(errorHandler(catchError))
+      .pipe(gulpif(production, sourcemaps.init({loadMaps: true})))
+      .pipe(gulpif(production, babel({ presets: ['env'] })))
+      .pipe(gulpif(production, uglify({keep_fnames: true})))
+      .pipe(gulpif(production, sourcemaps.write('./')))
+      .pipe(f.restore)
+      .pipe(gulp.dest('build'));
   },
 };
 
@@ -199,15 +196,13 @@ var req = [];
 // // individual tasks
 gulp.task('images', req, tasks.images);
 gulp.task('interactives', req, tasks.interactives);
-gulp.task('interactives_sass', req, tasks.interactives_sass);
 gulp.task('files', req, tasks.files);
 gulp.task('svg', req, tasks.svg);
 gulp.task('js', req, tasks.js);
 gulp.task('css', req, tasks.css);
 gulp.task('sass', req, tasks.sass);
-gulp.task('lint:js', tasks.lintjs);
 
 // // build task
 gulp.task('build', function(callback) {
-  runSequence('clean', ['images', 'svg', 'css', 'js', 'sass', 'interactives', 'interactives_sass', 'files'], callback);
+  runSequence('clean', ['images', 'svg', 'css', 'sass', 'interactives', 'files', 'js'], callback);
 });

csfieldguide/interactives/content/en/interactives.yaml

@@ -60,8 +60,8 @@ image-bit-comparer:
   name: Image Bit Comparer
 jpeg-compression:
   name: jpeg-compression (broken)
-MD5-hash:
-  name: MD5-hash (broken)
+md5-hash:
+  name: md5-hash (broken)
 mips-assembler:
   name: mips-assembler (broken)
 mips-simulator:

csfieldguide/interactives/content/structure/interactives.yaml

@@ -30,7 +30,7 @@ interactives:
   - huffman-tree
   - image-bit-comparer
   - jpeg-compression
-  - MD5-hash
+  - md5-hash
   - mips-assembler
   - mips-simulator
   - ncea-guide-selector