Update Gulp & other dependencies

{{cookiecutter.project_slug}}/gulpfile.js

@@ -1,34 +1,32 @@
+////////////////////////////////
+// Setup
+////////////////////////////////
 
-////////////////////////////////
+// Gulp and package
-		//Setup//
+const { src, dest, parallel, series, watch } = require('gulp')
-////////////////////////////////
+const pjson = require('./package.json')
 
 // Plugins
-var gulp = require('gulp'),
+const autoprefixer = require('autoprefixer')
-      pjson = require('./package.json'),
+const browserSync = require('browser-sync').create()
-      gutil = require('gulp-util'),
-      sass = require('gulp-sass'),
-      autoprefixer = require('gulp-autoprefixer'),
-      cssnano = require('gulp-cssnano'),
 {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
-      concat = require('gulp-concat'),
+const concat = require('gulp-concat')
 {% endif %}
-      rename = require('gulp-rename'),
+const cssnano = require ('cssnano')
-      del = require('del'),
+const imagemin = require('gulp-imagemin')
-      plumber = require('gulp-plumber'),
+const pixrem = require('pixrem')
-      pixrem = require('gulp-pixrem'),
+const plumber = require('gulp-plumber')
-      uglify = require('gulp-uglify'),
+const postcss = require('gulp-postcss')
-      imagemin = require('gulp-imagemin'),
+const reload = browserSync.reload
-      spawn = require('child_process').spawn,
+const rename = require('gulp-rename')
-      runSequence = require('run-sequence'),
+const sass = require('gulp-sass')
-      browserSync = require('browser-sync').create(),
+const spawn = require('child_process').spawn
-      reload = browserSync.reload;
+const uglify = require('gulp-uglify-es').default
-
 
 // Relative paths function
-var pathsConfig = function (appName) {
+function pathsConfig(appName) {
-  this.app = "./" + (appName || pjson.name);
+  this.app = "./" + (appName || pjson.name)
-  var vendorsRoot = 'node_modules/';
+  var vendorsRoot = 'node_modules/'
 
   return {
     {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
@@ -47,17 +45,26 @@ var pathsConfig = function (appName) {
     images: this.app + '/static/images',
     js: this.app + '/static/js'
   }
-};
+}
 
-var paths = pathsConfig();
+var paths = pathsConfig()
 
 ////////////////////////////////
-		//Tasks//
+// Tasks
 ////////////////////////////////
 
 // Styles autoprefixing and minification
-gulp.task('styles', function() {
+function styles() {
-  return gulp.src(paths.sass + '/project.scss')
+  var processCss = [
+      autoprefixer(), // adds vendor prefixes
+      pixrem(),       // add fallbacks for rem units
+  ]
+
+  var minifyCss = [
+      cssnano({ preset: 'default' })   // minify result
+  ]
+
+  return src(paths.sass + '/project.scss')
     .pipe(sass({
       includePaths: [
         {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
@@ -67,72 +74,80 @@ gulp.task('styles', function() {
       ]
     }).on('error', sass.logError))
     .pipe(plumber()) // Checks for errors
-    .pipe(autoprefixer({browsers: ['last 2 versions']})) // Adds vendor prefixes
+    .pipe(postcss(processCss))
-    .pipe(pixrem())  // add fallbacks for rem units
+    .pipe(dest(paths.css))
-    .pipe(gulp.dest(paths.css))
     .pipe(rename({ suffix: '.min' }))
-    .pipe(cssnano()) // Minifies the result
+    .pipe(postcss(minifyCss)) // Minifies the result
-    .pipe(gulp.dest(paths.css));
+    .pipe(dest(paths.css))
-});
+}
 
 // Javascript minification
-gulp.task('scripts', function() {
+function scripts() {
-  return gulp.src(paths.js + '/project.js')
+  return src(paths.js + '/project.js')
     .pipe(plumber()) // Checks for errors
     .pipe(uglify()) // Minifies the js
     .pipe(rename({ suffix: '.min' }))
-    .pipe(gulp.dest(paths.js));
+    .pipe(dest(paths.js))
-});
+}
-
 
 {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
 // Vendor Javascript minification
-gulp.task('vendor-scripts', function() {
+function vendorScripts() {
-  return gulp.src(paths.vendorsJs)
+  return src(paths.vendorsJs)
     .pipe(concat('vendors.js'))
-    .pipe(gulp.dest(paths.js))
+    .pipe(dest(paths.js))
     .pipe(plumber()) // Checks for errors
     .pipe(uglify()) // Minifies the js
     .pipe(rename({ suffix: '.min' }))
-    .pipe(gulp.dest(paths.js));
+    .pipe(dest(paths.js))
-});
+}
 {% endif %}
 
 // Image compression
-gulp.task('imgCompression', function(){
+function imgCompression() {
-  return gulp.src(paths.images + '/*')
+  return src(paths.images + '/*')
     .pipe(imagemin()) // Compresses PNG, JPEG, GIF and SVG images
-    .pipe(gulp.dest(paths.images))
+    .pipe(dest(paths.images))
-});
+}
+
+// Generate all assets
+const generateAssets = parallel(
+  styles,
+  scripts,
+  {% if cookiecutter.custom_bootstrap_compilation == 'y' %}vendorScripts,{% endif %}
+  imgCompression
+)
 
 // Run django server
-gulp.task('runServer', function(cb) {
+function runServer(cb) {
-  var cmd = spawn('python', ['manage.py', 'runserver'], {stdio: 'inherit'});
+  var cmd = spawn('python', ['manage.py', 'runserver'], {stdio: 'inherit'})
   cmd.on('close', function(code) {
-    console.log('runServer exited with code ' + code);
+    console.log('runServer exited with code ' + code)
-    cb(code);
+    cb(code)
-  });
+  })
-});
+}
 
 // Browser sync server for live reload
-gulp.task('browserSync', function() {
+function initBrowserSync() {
     browserSync.init(
       [paths.css + "/*.css", paths.js + "*.js", paths.templates + '*.html'], {
         proxy:  "localhost:8000"
-    });
+    })
-});
+}
 
 // Watch
-gulp.task('watch', function() {
+function watchPaths() {
+  watch(paths.sass + '/*.scss', styles)
+  watch(paths.js + '/*.js', scripts).on("change", reload)
+  watch(paths.images + '/*', imgCompression)
+  watch(paths.templates + '/**/*.html').on("change", reload)
+}
 
-  gulp.watch(paths.sass + '/*.scss', ['styles']);
+// Set up dev environment
-  gulp.watch(paths.js + '/*.js', ['scripts']).on("change", reload);
+const dev = parallel(
-  gulp.watch(paths.images + '/*', ['imgCompression']);
+  runServer,
-  gulp.watch(paths.templates + '/**/*.html').on("change", reload);
+  initBrowserSync,
+  watchPaths
+)
 
-});
+exports.default = series(generateAssets, dev)
-
-// Default task
-gulp.task('default', function() {
-    runSequence(['styles', 'scripts', {% if cookiecutter.custom_bootstrap_compilation == 'y' %}'vendor-scripts', {% endif %}'imgCompression'], ['runServer', 'browserSync', 'watch']);
-});

{{cookiecutter.project_slug}}/package.json

@@ -6,32 +6,29 @@
     {% if cookiecutter.js_task_runner == 'Gulp' -%}
     {% if cookiecutter.custom_bootstrap_compilation == 'y' -%}
     "bootstrap": "4.1.1",
-    {% endif -%}
-    "browser-sync": "^2.14.0",
-    "del": "^2.2.2",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^5.0.0",
-    {% if cookiecutter.custom_bootstrap_compilation == 'y' -%}
     "gulp-concat": "^2.6.1",
-    {% endif -%}
-    "gulp-cssnano": "^2.1.2",
-    "gulp-imagemin": "^4.1.0",
-    "gulp-pixrem": "^1.0.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^3.1.0",
-    "gulp-uglify": "^3.0.0",
-    "gulp-util": "^3.0.7",
-    {% if cookiecutter.custom_bootstrap_compilation == 'y' -%}
     "jquery": "3.3.1",
     "popper.js": "1.14.3",
     {% endif -%}
-    "run-sequence": "^2.1.1"
+    "autoprefixer": "^9.4.7",
+    "browser-sync": "^2.14.0",
+    "cssnano": "^4.1.10",
+    "gulp": "^4.0.0",
+    "gulp-imagemin": "^5.0.3",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^4.0.2",
+    "gulp-uglify-es": "^1.0.4",
+    "pixrem": "^5.0.0"
     {%- endif %}
   },
   "engines": {
-    "node": ">=0.8.0"
+    "node": ">=8"
   },
+  "browserslist": [
+    "last 2 versions"
+  ],
   "scripts": {
     {% if cookiecutter.js_task_runner == 'Gulp' -%}
     "dev": "gulp"