Updating Gulp and npm

.nvmrc

@@ -1 +1 @@
-6
+10

Dockerfile

@@ -14,7 +14,7 @@ RUN apt-get -yq update && \
 
 ADD . /opt/packet
 
-RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - && \
+RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && \
     curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
     apt-get -yq update && \

gulpfile.js/index.js

@@ -11,15 +11,12 @@
  when you run `gulp`.
  */
 
-var requireDir = require('require-dir');
-var gulp = require('gulp');
+const requireDir = require('require-dir');
+const gulp = require('gulp');
 
 // Require all tasks in gulpfile.js/tasks, including subfolders
 requireDir('./tasks', {recurse: true});
 
-// CSS
-gulp.task('css', ['sass:compile', 'css:minify']);
-
 // Default task
-gulp.task('default', ['css']);
-gulp.task('production', ['css', 'generate-favicon', 'pylint']);
+gulp.task('default', gulp.parallel('css'));
+gulp.task('production', gulp.parallel('css', 'generate-favicon', 'pylint'));

gulpfile.js/tasks/favicon.js

@@ -1,74 +1,74 @@
-var gulp = require('gulp');
-var realFavicon = require ('gulp-real-favicon');
-var fs = require('fs');
+const gulp = require('gulp');
+const realFavicon = require('gulp-real-favicon');
+const fs = require('fs');
 
 // File where the favicon markups are stored
-var FAVICON_DATA_FILE = 'faviconData.json';
+const FAVICON_DATA_FILE = 'faviconData.json';
 
 // Generate the icons. This task takes a few seconds to complete.
 // You should run it at least once to create the icons. Then,
 // you should run it whenever RealFaviconGenerator updates its
 // package (see the check-for-favicon-update task below).
-gulp.task('generate-favicon', function(done) {
-	realFavicon.generateFavicon({
-		masterPicture: 'packet/static/assets/logo.svg',
-		dest: 'packet/static',
-		iconsPath: '/',
-		design: {
-			ios: {
-				pictureAspect: 'backgroundAndMargin',
-				backgroundColor: '#ffffff',
-				margin: '35%',
-				assets: {
-					ios6AndPriorIcons: false,
-					ios7AndLaterIcons: false,
-					precomposedIcons: false,
-					declareOnlyDefaultIcon: true
-				}
-			},
-			desktopBrowser: {},
-			windows: {
-				pictureAspect: 'whiteSilhouette',
-				backgroundColor: '#b0197e',
-				onConflict: 'override',
-				assets: {
-					windows80Ie10Tile: true,
-					windows10Ie11EdgeTiles: {
-						small: true,
-						medium: true,
-						big: true,
-						rectangle: true
-					}
-				}
-			},
-			androidChrome: {
-				pictureAspect: 'noChange',
-				themeColor: '#b0197e',
-				manifest: {
-					display: 'standalone',
-					orientation: 'notSet',
-					onConflict: 'override',
-					declared: true
-				},
-				assets: {
-					legacyIcon: false,
-					lowResolutionIcons: false
-				}
-			},
-			safariPinnedTab: {
-				pictureAspect: 'silhouette',
-				themeColor: '#b0197e'
-			}
-		},
-		settings: {
-			scalingAlgorithm: 'Mitchell',
-			errorOnImageTooSmall: false,
-			readmeFile: false,
-			htmlCodeFile: false,
-			usePathAsIs: false
-		},
-		markupFile: FAVICON_DATA_FILE
-	}, function() {
-		done();
-	});
+gulp.task('generate-favicon', function (done) {
+    realFavicon.generateFavicon({
+        masterPicture: 'packet/static/assets/logo.svg',
+        dest: 'packet/static',
+        iconsPath: '/',
+        design: {
+            ios: {
+                pictureAspect: 'backgroundAndMargin',
+                backgroundColor: '#ffffff',
+                margin: '35%',
+                assets: {
+                    ios6AndPriorIcons: false,
+                    ios7AndLaterIcons: false,
+                    precomposedIcons: false,
+                    declareOnlyDefaultIcon: true
+                }
+            },
+            desktopBrowser: {},
+            windows: {
+                pictureAspect: 'whiteSilhouette',
+                backgroundColor: '#b0197e',
+                onConflict: 'override',
+                assets: {
+                    windows80Ie10Tile: true,
+                    windows10Ie11EdgeTiles: {
+                        small: true,
+                        medium: true,
+                        big: true,
+                        rectangle: true
+                    }
+                }
+            },
+            androidChrome: {
+                pictureAspect: 'noChange',
+                themeColor: '#b0197e',
+                manifest: {
+                    display: 'standalone',
+                    orientation: 'notSet',
+                    onConflict: 'override',
+                    declared: true
+                },
+                assets: {
+                    legacyIcon: false,
+                    lowResolutionIcons: false
+                }
+            },
+            safariPinnedTab: {
+                pictureAspect: 'silhouette',
+                themeColor: '#b0197e'
+            }
+        },
+        settings: {
+            scalingAlgorithm: 'Mitchell',
+            errorOnImageTooSmall: false,
+            readmeFile: false,
+            htmlCodeFile: false,
+            usePathAsIs: false
+        },
+        markupFile: FAVICON_DATA_FILE
+    }, function () {
+        done();
+    });
 });

gulpfile.js/tasks/pylint.js

@@ -1,12 +1,12 @@
-var gulp = require('gulp');
-var exec = require('child_process').exec;
+const gulp = require('gulp');
+const exec = require('child_process').exec;
 
-var pylintTask = function (cb) {
+let pylintTask = function (cb) {
     exec('pylint packet', function (err, stdout, stderr) {
         console.log(stdout);
         console.log(stderr);
         cb(err);
     });
-}
+};
 
 gulp.task('pylint', pylintTask);

gulpfile.js/tasks/stylesheets.js

@@ -0,0 +1,29 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const cleanCSS = require('gulp-clean-css');
+const rename = require("gulp-rename");
+
+// Compile SCSS
+gulp.task('sass:compile', function () {
+    return gulp.src('frontend/scss/**/*.scss')
+        .pipe(sass.sync({
+            outputStyle: 'expanded'
+        }).on('error', sass.logError))
+        .pipe(gulp.dest('packet/static/css'))
+});
+
+// Minify CSS
+gulp.task('css:minify', gulp.series('sass:compile'), function () {
+    return gulp.src([
+        'packet/static/css/*.css',
+        '!packet/static/css/*.min.css'
+    ])
+        .pipe(cleanCSS())
+        .pipe(rename({
+            suffix: '.min'
+        }))
+        .pipe(gulp.dest('packet/static/css'));
+});
+
+// CSS
+gulp.task('css', gulp.series('sass:compile', 'css:minify'));

package.json

@@ -17,11 +17,11 @@
     "url": "https://github.com/ComputerScienceHouse/packet.git"
   },
   "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-clean-css": "^3.9.2",
-    "gulp-real-favicon": "^0.2.2",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^3.1.0",
-    "require-dir": "^1.0.0"
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.2.0",
+    "gulp-real-favicon": "^0.3.2",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "require-dir": "^1.2.0"
   }
 }