Merge pull request #1946 from takkaria/master

Update Gulp & other NPM dependencies

CONTRIBUTORS.rst

@@ -57,6 +57,7 @@ Listed in alphabetical order.
   Andrew Mikhnevich        `@zcho`_
   Andy Rose
   Anna Callahan            `@jazztpt`_
+  Anna Sidwell             `@takkaria`_
   Antonia Blair            `@antoniablair`_             @antoniablairart
   Anuj Bansal              `@ahhda`_
   Arcuri Davide            `@dadokkio`_
@@ -271,6 +272,7 @@ Listed in alphabetical order.
 .. _@ssteinerX: https://github.com/ssteinerx
 .. _@stepmr: https://github.com/stepmr
 .. _@suledev: https://github.com/suledev
+.. _@takkaria: https://github.com/takkaria
 .. _@timfreund: https://github.com/timfreund
 .. _@Travistock: https://github.com/Tavistock
 .. _@trungdong: https://github.com/trungdong

{{cookiecutter.project_slug}}/gulpfile.js

@@ -1,63 +1,70 @@
+////////////////////////////////
+// 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'),
+{% if cookiecutter.custom_bootstrap_compilation == 'y' %}
-      sass = require('gulp-sass'),
+const concat = require('gulp-concat')
-      autoprefixer = require('gulp-autoprefixer'),
+{% endif %}
-      cssnano = require('gulp-cssnano'),
+const cssnano = require ('cssnano')
-      {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
+const imagemin = require('gulp-imagemin')
-      concat = require('gulp-concat'),
+const pixrem = require('pixrem')
-      {% endif %}
+const plumber = require('gulp-plumber')
-      rename = require('gulp-rename'),
+const postcss = require('gulp-postcss')
-      del = require('del'),
+const reload = browserSync.reload
-      plumber = require('gulp-plumber'),
+const rename = require('gulp-rename')
-      pixrem = require('gulp-pixrem'),
+const sass = require('gulp-sass')
-      uglify = require('gulp-uglify'),
+const spawn = require('child_process').spawn
-      imagemin = require('gulp-imagemin'),
+const uglify = require('gulp-uglify-es').default
-      spawn = require('child_process').spawn,
-      runSequence = require('run-sequence'),
-      browserSync = require('browser-sync').create(),
-      reload = browserSync.reload;
-
 
 // Relative paths function
-var pathsConfig = function (appName) {
+function pathsConfig(appName) {
-  this.app = "./" + (appName || pjson.name);
+  this.app = `./${pjson.name}`
-  var vendorsRoot = 'node_modules/';
+  const vendorsRoot = 'node_modules'
 
   return {
     {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
-    bootstrapSass: vendorsRoot + '/bootstrap/scss',
+    bootstrapSass: `${vendorsRoot}/bootstrap/scss`,
     vendorsJs: [
-      vendorsRoot + 'jquery/dist/jquery.slim.js',
+      `${vendorsRoot}/jquery/dist/jquery.slim.js`,
-      vendorsRoot + 'popper.js/dist/umd/popper.js',
+      `${vendorsRoot}/popper.js/dist/umd/popper.js`,
-      vendorsRoot + 'bootstrap/dist/js/bootstrap.js'
+      `${vendorsRoot}/bootstrap/dist/js/bootstrap.js`,
     ],
     {% endif %}
     app: this.app,
-    templates: this.app + '/templates',
+    templates: `${this.app}/templates`,
-    css: this.app + '/static/css',
+    css: `${this.app}/static/css`,
-    sass: this.app + '/static/sass',
+    sass: `${this.app}/static/sass`,
-    fonts: this.app + '/static/fonts',
+    fonts: `${this.app}/static/fonts`,
-    images: this.app + '/static/images',
+    images: `${this.app}/static/images`,
-    js: this.app + '/static/js'
+    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,86 @@ 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))
-});
+}
 
 // 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'], {
+      [
+        `${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.templates}/**/*.html`).on("change", reload)
+  watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`], scripts).on("change", reload)
+}
 
-  gulp.watch(paths.sass + '/*.scss', ['styles']);
+// Generate all assets
-  gulp.watch(paths.js + '/*.js', ['scripts']).on("change", reload);
+const generateAssets = parallel(
-  gulp.watch(paths.images + '/*', ['imgCompression']);
+  styles,
-  gulp.watch(paths.templates + '/**/*.html').on("change", reload);
+  scripts,
+  {% if cookiecutter.custom_bootstrap_compilation == 'y' %}vendorScripts,{% endif %}
+  imgCompression
+)
 
-});
+// Set up dev environment
+const dev = parallel(
+  runServer,
+  initBrowserSync,
+  watchPaths
+)
 
-// Default task
+exports.default = series(generateAssets, dev)
-gulp.task('default', function() {
+exports["generate-assets"] = generateAssets
-    runSequence(['styles', 'scripts', {% if cookiecutter.custom_bootstrap_compilation == 'y' %}'vendor-scripts', {% endif %}'imgCompression'], ['runServer', 'browserSync', 'watch']);
+exports["dev"] = dev
-});

{{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"