Upgraded to gulp 4

Use `yarn watch` to use local gulp

frontend/gulp/build.js

@@ -1,15 +1,18 @@
 const gulp = require('gulp');
-const runSequence = require('run-sequence');
 
 require('./clean');
 require('./copy');
+require('./webpack');
+
+gulp.task('build',
+  gulp.series('clean',
+    gulp.parallel(
+      'webpack',
+      'copyHtml',
+      'copyFonts',
+      'copyImages',
+      'copyJs'
+    )
+  )
+);
 
-gulp.task('build', () => {
-  return runSequence('clean', [
-    'webpack',
-    'copyHtml',
-    'copyFonts',
-    'copyImages',
-    'copyJs'
-  ]);
-});

frontend/gulp/copy.js

@@ -1,9 +1,10 @@
-var path = require('path');
-var gulp = require('gulp');
-var print = require('gulp-print').default;
-var cache = require('gulp-cached');
-var livereload = require('gulp-livereload');
-var paths = require('./helpers/paths.js');
+const path = require('path');
+const gulp = require('gulp');
+const print = require('gulp-print').default;
+const cache = require('gulp-cached');
+const flatten = require('gulp-flatten');
+const livereload = require('gulp-livereload');
+const paths = require('./helpers/paths.js');
 
 gulp.task('copyJs', () => {
   return gulp.src(
@@ -12,6 +13,7 @@ gulp.task('copyJs', () => {
     ])
     .pipe(cache('copyJs'))
     .pipe(print())
+    .pipe(flatten())
     .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });
@@ -30,7 +32,8 @@ gulp.task('copyFonts', () => {
   )
     .pipe(cache('copyFonts'))
     .pipe(print())
-    .pipe(gulp.dest(paths.dest.fonts))
+    .pipe(flatten({ subPath: 2 }))
+    .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });
 
@@ -40,6 +43,7 @@ gulp.task('copyImages', () => {
   )
     .pipe(cache('copyImages'))
     .pipe(print())
-    .pipe(gulp.dest(paths.dest.images))
+    .pipe(flatten({ subPath: 2 }))
+    .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });

frontend/gulp/gulpFile.js

@@ -1,8 +1,5 @@
 require('./build.js');
 require('./clean.js');
 require('./copy.js');
-require('./imageMin.js');
-require('./start.js');
-require('./stripBom.js');
 require('./watch.js');
 require('./webpack.js');

frontend/gulp/helpers/html-annotate-loader.js

@@ -1,15 +0,0 @@
-const path = require('path');
-const rootPath = path.resolve(__dirname + '/../../src/');
-module.exports = function(source) {
-  if (this.cacheable) {
-    this.cacheable();
-  }
-
-  const resourcePath = this.resourcePath.replace(rootPath, '');
-  const wrappedSource =`
-  <!-- begin ${resourcePath} -->
-    ${source}
-  <!-- end ${resourcePath} -->`;
-
-  return wrappedSource;
-};

frontend/gulp/helpers/paths.js

@@ -3,11 +3,11 @@ const root = './frontend/src/';
 const paths = {
   src: {
     root,
-    html: root + '*.html',
-    scripts: root + '**/*.js',
-    content: root + 'Content/',
-    fonts: root + 'Content/Fonts/',
-    images: root + 'Content/Images/',
+    html: `${root}*.html`,
+    scripts: `${root}**/*.js`,
+    content: `${root}Content/`,
+    fonts: `${root}Content/Fonts/`,
+    images: `${root}Content/Images/`,
     exclude: {
       libs: `!${root}JsLibraries/**`
     }

frontend/gulp/imageMin.js

@@ -1,15 +0,0 @@
-var gulp = require('gulp');
-var print = require('gulp-print').default;
-var paths = require('./helpers/paths.js');
-
-gulp.task('imageMin', () => {
-  var imagemin = require('gulp-imagemin');
-  return gulp.src(paths.src.images)
-    .pipe(imagemin({
-      progressive: false,
-      optimizationLevel: 4,
-      svgoPlugins: [{ removeViewBox: false }]
-    }))
-    .pipe(print())
-    .pipe(gulp.dest(paths.src.content + 'Images/'));
-});

frontend/gulp/start.js

@@ -1,104 +0,0 @@
-// will download and run sonarr (server) in a non-windows enviroment
-// you can use this if you don't care about the server code and just want to work
-// with the web code.
-
-var http = require('http');
-var gulp = require('gulp');
-var fs = require('fs');
-var targz = require('tar.gz');
-var del = require('del');
-var spawn = require('child_process').spawn;
-
-function download(url, dest, cb) {
-  console.log('Downloading ' + url + ' to ' + dest);
-  var file = fs.createWriteStream(dest);
-  http.get(url, function(response) {
-    response.pipe(file);
-    file.on('finish', function() {
-      console.log('Download completed');
-      file.close(cb);
-    });
-  });
-}
-
-function getLatest(cb) {
-  var branch = 'develop';
-  process.argv.forEach(function(val) {
-    var branchMatch = /branch=([\S]*)/.exec(val);
-    if (branchMatch && branchMatch.length > 1) {
-      branch = branchMatch[1];
-    }
-  });
-
-  var url = 'http://services.sonarr.tv/v1/update/' + branch + '?os=osx';
-
-  console.log('Checking for latest version:', url);
-
-  http.get(url, function(res) {
-    var data = '';
-
-    res.on('data', function(chunk) {
-      data += chunk;
-    });
-
-    res.on('end', function() {
-      var updatePackage = JSON.parse(data).updatePackage;
-      console.log('Latest version available: ' + updatePackage.version + ' Release Date: ' + updatePackage.releaseDate);
-      cb(updatePackage);
-    });
-  }).on('error', function(e) {
-    console.log('problem with request: ' + e.message);
-  });
-}
-
-function extract(source, dest, cb) {
-  console.log('extracting download page to ' + dest);
-  new targz().extract(source, dest, function(err) {
-    if (err) {
-      console.log(err);
-    }
-    console.log('Update package extracted.');
-    cb();
-  });
-}
-
-gulp.task('getSonarr', function() {
-  try {
-    fs.mkdirSync('./_start/');
-  } catch (e) {
-    if (e.code !== 'EEXIST') {
-      throw e;
-    }
-  }
-
-  getLatest(function(updatePackage) {
-    var packagePath = './_start/' + updatePackage.filename;
-    var dirName = './_start/' + updatePackage.version;
-    download(updatePackage.url, packagePath, function() {
-      extract(packagePath, dirName, function() {
-        // clean old binaries
-        console.log('Cleaning old binaries');
-        del.sync(['./_output/*', '!./_output/UI/']);
-        console.log('copying binaries to target');
-        gulp.src(dirName + '/NzbDrone/*.*')
-          .pipe(gulp.dest('./_output/'));
-      });
-    });
-  });
-});
-
-gulp.task('startSonarr', function() {
-  var ls = spawn('mono', ['--debug', './_output/NzbDrone.exe']);
-
-  ls.stdout.on('data', function(data) {
-    process.stdout.write(data);
-  });
-
-  ls.stderr.on('data', function(data) {
-    process.stdout.write(data);
-  });
-
-  ls.on('close', function(code) {
-    console.log('child process exited with code ' + code);
-  });
-});

frontend/gulp/stripBom.js

@@ -1,13 +0,0 @@
-const gulp = require('gulp');
-const paths = require('./helpers/paths.js');
-const stripbom = require('gulp-stripbom');
-
-function stripBom(dest) {
-  gulp.src([paths.src.scripts, paths.src.exclude.libs])
-    .pipe(stripbom({ showLog: false }))
-    .pipe(gulp.dest(dest));
-}
-
-gulp.task('stripBom', () => {
-  stripBom(paths.src.root);
-});

frontend/gulp/watch.js

@@ -1,27 +1,18 @@
 const gulp = require('gulp');
 const livereload = require('gulp-livereload');
-const watch = require('gulp-watch');
+const gulpWatch = require('gulp-watch');
 const paths = require('./helpers/paths.js');
 
 require('./copy.js');
 require('./webpack.js');
 
-function watchTask(glob, task) {
-  const options = {
-    name: `watch: ${task}`,
-    verbose: true
-  };
-  return watch(glob, options, () => {
-    gulp.start(task);
-  });
-}
-
-gulp.task('watch', ['copyHtml', 'copyFonts', 'copyImages', 'copyJs'], () => {
+function watch() {
   livereload.listen({ start: true });
 
-  gulp.start('webpackWatch');
+  gulp.task('webpackWatch')();
+  gulpWatch(paths.src.html, gulp.series('copyHtml'));
+  gulpWatch(`${paths.src.fonts}**/*.*`, gulp.series('copyFonts'));
+  gulpWatch(`${paths.src.images}**/*.*`, gulp.series('copyImages'));
+}
 
-  watchTask(paths.src.html, 'copyHtml');
-  watchTask(`${paths.src.fonts}**/*.*`, 'copyFonts');
-  watchTask(`${paths.src.images}**/*.*`, 'copyImages');
-});
+gulp.task('watch', gulp.series('build', watch));

frontend/gulp/webpack.js

@@ -169,17 +169,16 @@ const config = {
 };
 
 gulp.task('webpack', () => {
-  return gulp.src('index.js')
-    .pipe(webpackStream(config))
-    .pipe(gulp.dest(''));
+  return webpackStream(config)
+    .pipe(gulp.dest('./'));
 });
 
 gulp.task('webpackWatch', () => {
   config.watch = true;
-  return gulp.src('')
-    .pipe(webpackStream(config))
+
+  return webpackStream(config)
     .on('error', errorHandler)
-    .pipe(gulp.dest(''))
+    .pipe(gulp.dest('./'))
     .on('error', errorHandler)
     .pipe(livereload())
     .on('error', errorHandler);

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "gulp build",
     "start": "gulp watch",
+    "watch": "gulp watch",
     "eslint": "esprint check",
     "eslint-fix": "eslint start --fix",
     "stylelint": "stylelint frontend/**/*.css --config frontend/.stylelintrc"
@@ -54,15 +55,15 @@
     "file-loader": "3.0.1",
     "filesize": "4.1.2",
     "fuse.js": "3.4.2",
-    "gulp": "3.9.1",
+    "gulp": "4.0.0",
     "gulp-cached": "1.1.1",
-    "gulp-clean-css": "3.10.0",
     "gulp-concat": "2.6.1",
     "gulp-declare": "0.3.0",
-    "gulp-livereload": "4.0.0",
+    "gulp-flatten": "0.4.0",
+    "gulp-livereload": "4.0.1",
     "gulp-postcss": "8.0.0",
     "gulp-print": "5.0.0",
-    "gulp-sourcemaps": "2.6.4",
+    "gulp-sourcemaps": "2.6.5",
     "gulp-stripbom": "1.0.4",
     "gulp-util": "3.0.8",
     "gulp-watch": "5.0.1",