⬆️ 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/infinitescroll.js

@@ -1,2 +1,2 @@
 $(function(t){var o=1,r=window.location.pathname,a=t(document),s=t(".post-feed"),c=300,l=!1,w=!1,d=window.scrollY,v=window.innerHeight,u=a.height();function f(){d=window.scrollY,e()}function g(){v=window.innerHeight,u=a.height(),e()}function e(){l||requestAnimationFrame(n),l=!0}function n(){var e,n;if(n=/(?:page\/)(\d)(?:\/)$/i,(e=(e=r).replace(/#(.*)$/g,"").replace("////g","/")).match(n)&&(o=parseInt(e.match(n)[1]),e=e.replace(n,"")),r=e,!w)if(d+v<=u-c)l=!1;else{if(o>=maxPages)return window.removeEventListener("scroll",f,{passive:!0}),void window.removeEventListener("resize",g);w=!0;var i=r+"page/"+(o+=1)+"/";t.get(i,function(e){var n=document.createRange().createContextualFragment(e).querySelectorAll(".post");n.length&&[].forEach.call(n,function(e){s[0].appendChild(e)})}).fail(function(e){404===e.status&&(window.removeEventListener("scroll",f,{passive:!0}),window.removeEventListener("resize",g))}).always(function(){u=a.height(),l=w=!1})}}window.addEventListener("scroll",f,{passive:!0}),window.addEventListener("resize",g),n()});
-//# sourceMappingURL=infinitescroll.js.map
+//# sourceMappingURL=infinitescroll.js.map

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) {
+function serve(done) {
-    gutil.log(error.toString());
+    livereload.listen();
-    gutil.beep();
+    done();
-    this.emit('end');
+}
+
+const handleError = (done) => {
+    return function (err) {
+        if (err) {
+            beeper();
+        }
+        return done(err);
+    };
 };
 
-var nodemonServerInit = function () {
+function css(done) {
-    livereload.listen(1234);
-};
-
-gulp.task('build', ['css', 'js'], function (/* cb */) {
-    return nodemonServerInit();
-});
-
-gulp.task('generate', ['css', 'js']);
-
-gulp.task('css', function () {
     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')
+    pump([
-        .on('error', swallowError)
+        src('assets/css/*.css', { sourcemaps: true }),
-        .pipe(sourcemaps.init())
+        postcss(processors),
-        .pipe(postcss(processors))
+        dest('assets/built/', { sourcemaps: '.' }),
-        .pipe(sourcemaps.write('.'))
+        livereload()
-        .pipe(gulp.dest('assets/built/'))
+    ], handleError(done));
-        .pipe(livereload());
+}
-});
 
-gulp.task('js', function () {
+function js(done) {
-    var jsFilter = filter(['**/*.js'], {restore: true});
+    pump([
+        src('assets/js/*.js', { sourcemaps: true }),
+        uglify(),
+        dest('assets/built/', { sourcemaps: '.' }),
+        livereload()
+    ], handleError(done));
+}
 
-    return gulp.src('assets/js/*.js')
+function zipper(done) {
-        .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 () {
     var targetDir = 'dist/';
     var themeName = require('./package.json').name;
     var filename = themeName + '.zip';
 
-    return gulp.src([
+    pump([
-        '**',
+        src([
-        '!node_modules', '!node_modules/**',
+            '**',
-        '!dist', '!dist/**'
+            '!node_modules', '!node_modules/**',
-    ])
+            '!dist', '!dist/**'
-        .pipe(zip(filename))
+        ]),
-        .pipe(gulp.dest(targetDir));
+        zip(filename),
-});
+        dest(targetDir)
+    ], handleError(done));
+}
 
-gulp.task('default', ['build'], function () {
+const watcher = () => watch('assets/css/**', css);
-    gulp.start('watch');
+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",
+        "autoprefixer": "9.4.10",
-        "cssnano": "3.7.1",
+        "cssnano": "4.1.10",
         "gscan": "^2.0.0",
-        "gulp": "3.9.1",
+        "gulp": "4.0.0",
-        "gulp-livereload": "3.8.1",
+        "gulp-livereload": "4.0.1",
-        "gulp-postcss": "6.1.1",
+        "gulp-postcss": "8.0.0",
-        "gulp-sourcemaps": "1.6.0",
+        "gulp-sourcemaps": "2.6.5",
-        "gulp-util": "3.0.7",
+        "gulp-uglify": "3.0.2",
-        "gulp-watch": "4.3.8",
+        "gulp-util": "3.0.8",
-        "gulp-zip": "4.0.0",
+        "gulp-watch": "5.0.1",
-        "postcss-color-function": "2.0.1",
+        "gulp-zip": "4.2.0",
-        "postcss-custom-properties": "5.0.1",
+        "postcss-color-function": "4.0.1",
-        "postcss-easy-import": "1.0.1",
+        "postcss-custom-properties": "8.0.9",
-        "gulp-filter": "5.1.0",
+        "postcss-easy-import": "3.0.0"
-        "gulp-uglify": "3.0.1"
     },
     "config": {
         "posts_per_page": 15,