⬆️ Updated Gulp to v4 and made livereload work

no issue

- update Gulp and related dependencies to v4
- Refactor gulpfile for Gulp 4.0
- Make livereload work

assets/built/vars.css

@@ -0,0 +1,2 @@
+
+/*# sourceMappingURL=vars.css.map */

assets/built/vars.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"vars.css"}

gulpfile.js

@@ -1,13 +1,12 @@
-var gulp = require('gulp');
+const { series, watch, src, dest } = require('gulp');
+const pump = require('pump');
 
 // gulp plugins and utils
-var gutil = require('gulp-util');
 var livereload = require('gulp-livereload');
 var postcss = require('gulp-postcss');
-var sourcemaps = require('gulp-sourcemaps');
 var zip = require('gulp-zip');
 var uglify = require('gulp-uglify');
-var filter = require('gulp-filter');
+var beeper = require('beeper');
 
 // postcss plugins
 var autoprefixer = require('autoprefixer');
@@ -16,72 +15,66 @@ var cssnano = require('cssnano');
 var customProperties = require('postcss-custom-properties');
 var easyimport = require('postcss-easy-import');
 
-var swallowError = function swallowError(error) {
-    gutil.log(error.toString());
-    gutil.beep();
-    this.emit('end');
+function serve(done) {
+    livereload.listen();
+    done();
+}
+
+const handleError = (done) => {
+    return function (err) {
+        if (err) {
+            beeper();
+        }
+        return done(err);
+    };
 };
 
-var nodemonServerInit = function () {
-    livereload.listen(1234);
-};
-
-gulp.task('build', ['css', 'js'], function (/* cb */) {
-    return nodemonServerInit();
-});
-
-gulp.task('generate', ['css', 'js']);
-
-gulp.task('css', function () {
+function css(done) {
     var processors = [
         easyimport,
-        customProperties,
+        customProperties({ preserve: false }),
         colorFunction(),
-        autoprefixer({browsers: ['last 2 versions']}),
+        autoprefixer({ browsers: ['last 2 versions'] }),
         cssnano()
     ];
 
-    return gulp.src('assets/css/screen.css')
-        .on('error', swallowError)
-        .pipe(sourcemaps.init())
-        .pipe(postcss(processors))
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest('assets/built/'))
-        .pipe(livereload());
-});
+    pump([
+        src('assets/css/*.css', { sourcemaps: true }),
+        postcss(processors),
+        dest('assets/built/', { sourcemaps: '.' }),
+        livereload()
+    ], handleError(done));
+}
 
-gulp.task('js', function () {
-    var jsFilter = filter(['**/*.js'], {restore: true});
+function js(done) {
+    pump([
+        src('assets/js/*.js', { sourcemaps: true }),
+        uglify(),
+        dest('assets/built/', { sourcemaps: '.' }),
+        livereload()
+    ], handleError(done));
+}
 
-    return gulp.src('assets/js/*.js')
-        .on('error', swallowError)
-        .pipe(sourcemaps.init())
-        .pipe(jsFilter)
-        .pipe(uglify())
-        .pipe(jsFilter.restore)
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest('assets/built/'))
-        .pipe(livereload());
-});
-
-gulp.task('watch', function () {
-    gulp.watch('assets/css/**/*.css', ['css']);
-});
-
-gulp.task('zip', ['css', 'js'], function () {
+function zipper(done) {
     var targetDir = 'dist/';
     var themeName = require('./package.json').name;
     var filename = themeName + '.zip';
 
-    return gulp.src([
+    pump([
+        src([
             '**',
             '!node_modules', '!node_modules/**',
             '!dist', '!dist/**'
-    ])
-        .pipe(zip(filename))
-        .pipe(gulp.dest(targetDir));
-});
+        ]),
+        zip(filename),
+        dest(targetDir)
+    ], handleError(done));
+}
 
-gulp.task('default', ['build'], function () {
-    gulp.start('watch');
-});
+const watcher = () => watch('assets/css/**', css);
+const build = series(css, js);
+const dev = series(build, serve, watcher);
+
+exports.build = build;
+exports.zip = series(build, zipper);
+exports.default = dev;

package.json

@@ -14,7 +14,10 @@
     "scripts": {
         "dev": "gulp",
         "zip": "gulp zip",
-        "test": "gscan ."
+        "test": "gscan .",
+        "pretest": "gulp build",
+        "preship": "yarn test",
+        "ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version && git push --follow-tags; fi"
     },
     "author": {
         "name": "Ghost Foundation",
@@ -40,21 +43,20 @@
     "bugs": "https://github.com/TryGhost/Starter/issues",
     "contributors": "https://github.com/TryGhost/Starter/graphs/contributors",
     "devDependencies": {
-        "autoprefixer": "6.3.6",
-        "cssnano": "3.7.1",
+        "autoprefixer": "9.4.10",
+        "cssnano": "4.1.10",
         "gscan": "^2.0.0",
-        "gulp": "3.9.1",
-        "gulp-livereload": "3.8.1",
-        "gulp-postcss": "6.1.1",
-        "gulp-sourcemaps": "1.6.0",
-        "gulp-util": "3.0.7",
-        "gulp-watch": "4.3.8",
-        "gulp-zip": "4.0.0",
-        "postcss-color-function": "2.0.1",
-        "postcss-custom-properties": "5.0.1",
-        "postcss-easy-import": "1.0.1",
-        "gulp-filter": "5.1.0",
-        "gulp-uglify": "3.0.1"
+        "gulp": "4.0.0",
+        "gulp-livereload": "4.0.1",
+        "gulp-postcss": "8.0.0",
+        "gulp-sourcemaps": "2.6.5",
+        "gulp-uglify": "3.0.2",
+        "gulp-util": "3.0.8",
+        "gulp-watch": "5.0.1",
+        "gulp-zip": "4.2.0",
+        "postcss-color-function": "4.0.1",
+        "postcss-custom-properties": "8.0.9",
+        "postcss-easy-import": "3.0.0"
     },
     "config": {
         "posts_per_page": 15,