migrated gulp to version 4 and removed unnecessary dependencies

gulpfile.js

@@ -1,201 +1,168 @@
-var gulp = require('gulp');
-var gulpLoadPlugins = require('gulp-load-plugins');
-var browserSync = require('browser-sync');
-var del = require('del');
-var fs = require('fs');
-var git = require('git-rev-sync');
-var tryFn = require('nice-try');
-var saveLicense = require('uglify-save-license');
-
-var $ = gulpLoadPlugins();
-var reload = browserSync.reload;
-
-gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
-
-gulp.task('lint', function () {
-    return gulp.src([
-        'src/scripts/**/*.js'
-    ]).pipe(reload({stream: true, once: true}))
-        .pipe($.eslint.format())
-        .pipe($.if(!browserSync.active, $.eslint.failAfterError()))
-        .pipe(gulp.dest('src/scripts'));
-});
-
-gulp.task('prepare-fonts', function () {
-    return gulp.src([
-        'node_modules/font-awesome/fonts/fontawesome-webfont.*'
-    ]).pipe(gulp.dest('.tmp/fonts'));
-});
-
-gulp.task('process-fonts', ['prepare-fonts'], function () {
-    return gulp.src([
-        '.tmp/fonts/**/*'
-    ]).pipe(gulp.dest('dist/fonts'));
-});
-
-gulp.task('prepare-langs', function () {
-    return gulp.src([
-        'src/langs/**/*'
-    ]).pipe(gulp.dest('.tmp/langs'));
-});
-
-gulp.task('process-langs', ['prepare-langs'], function () {
-    return gulp.src([
-        '.tmp/langs/**/*'
-    ]).pipe(gulp.dest('dist/langs'));
-});
-
-gulp.task('prepare-styles', function () {
-    return gulp.src([
-        'src/styles/**/*.css'
-    ]).pipe($.autoprefixer())
-        .pipe(gulp.dest('.tmp/styles'))
-        .pipe(reload({stream: true}));
-});
-
-gulp.task('prepare-scripts', function () {
-    return gulp.src([
-        'src/scripts/**/*.js'
-    ]).pipe($.plumber())
-        .pipe($.injectVersion({replace: '${ARIANG_VERSION}'}))
-        .pipe($.replace(/\${ARIANG_BUILD_COMMIT}/g, tryFn(git.short) || 'Local'))
-        .pipe(gulp.dest('.tmp/scripts'))
-        .pipe(reload({stream: true}));
-});
-
-gulp.task('prepare-views', function () {
-    return gulp.src([
-        'src/views/**/*.html'
-    ]).pipe($.htmlmin({collapseWhitespace: true}))
-        .pipe($.angularTemplatecache({module: 'ariaNg', filename: 'views/templates.js', root: 'views/'}))
-        .pipe(gulp.dest('.tmp/scripts'));
-});
-
-gulp.task('prepare-html', ['prepare-styles', 'prepare-scripts', 'prepare-views'], function () {
-    return gulp.src([
-        'src/*.html'
-    ]).pipe($.useref({searchPath: ['.tmp', 'src', '.']}))
-        .pipe($.if('js/*.js', $.replace(/\/\/# sourceMappingURL=.*/g, '')))
-        .pipe($.if('css/*.css', $.replace(/\/\*# sourceMappingURL=.* \*\/$/g, '')))
-        .pipe($.if(['js/moment-with-locales-*.min.js', 'js/plugins.min.js', 'js/aria-ng.min.js'], $.uglify({output: {comments: saveLicense}})))
-        .pipe($.if(['css/plugins.min.css', 'css/aria-ng.min.css'], $.cssnano({safe: true, autoprefixer: false})))
-        .pipe($.replace(/url\((\.\.\/fonts\/[a-zA-Z0-9\-]+\.woff2)(\?[a-zA-Z0-9\-_=.]+)?\)/g, function(match, fileName) {
-            return 'url(' + fileName + ')'; // remove version of woff2 file (woff2 file should be cached via application cache)
-        }))
-        .pipe($.if(['js/plugins.min.js', 'js/aria-ng.min.js', 'css/plugins.min.css', 'css/aria-ng.min.css'], $.rev()))
-        .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
-        .pipe($.revReplace())
-        .pipe(gulp.dest('.tmp'));
-});
-
-gulp.task('process-html', ['prepare-html'], function () {
-    return gulp.src([
-        '.tmp/*.html'
-    ]).pipe($.replace(/<!-- AriaNg-Bundle:\w+ -->/, ''))
-        .pipe(gulp.dest('dist'));
-});
-
-gulp.task('process-assets', ['process-html'], function () {
-    return gulp.src([
-        '.tmp/css/**/*',
-        '.tmp/js/**/*'
-    ],{ base: '.tmp' })
-        .pipe(gulp.dest('dist'));
-});
-
-gulp.task('prepare-assets-bundle', function () {
-    return gulp.src([
-        'src/favicon.png'
-    ]).pipe(gulp.dest('.tmp'));
-});
+const gulp = require('gulp');
+const gulpLoadPlugins = require('gulp-load-plugins');
+const browserSync = require('browser-sync');
+const del = require('del');
+const fs = require('fs');
+const git = require('git-rev-sync');
+const tryFn = require('nice-try');
+const saveLicense = require('uglify-save-license');
+
+const $ = gulpLoadPlugins();
+const reload = browserSync.reload;
+
+gulp.task('clean', () => del(['.tmp', 'dist']));
+
+gulp.task('lint', () => gulp.src([
+    'src/scripts/**/*.js'
+]).pipe(reload({stream: true, once: true}))
+    .pipe($.eslint.format())
+    .pipe($.if(!browserSync.active, $.eslint.failAfterError()))
+    .pipe(gulp.dest('src/scripts')));
+
+gulp.task('prepare-fonts', () => gulp.src([
+    'node_modules/font-awesome/fonts/fontawesome-webfont.*'
+]).pipe(gulp.dest('.tmp/fonts')));
+
+gulp.task('process-fonts', gulp.series('prepare-fonts', () => gulp.src([
+    '.tmp/fonts/**/*'
+]).pipe(gulp.dest('dist/fonts'))));
+
+gulp.task('prepare-langs', () => gulp.src([
+    'src/langs/**/*'
+]).pipe(gulp.dest('.tmp/langs')));
+
+gulp.task('process-langs', gulp.series('prepare-langs', () => gulp.src([
+    '.tmp/langs/**/*'
+]).pipe(gulp.dest('dist/langs'))));
+
+gulp.task('prepare-styles', () => gulp.src([
+    'src/styles/**/*.css'
+]).pipe($.autoprefixer())
+    .pipe(gulp.dest('.tmp/styles'))
+    .pipe(reload({stream: true})));
+
+gulp.task('prepare-scripts', () => gulp.src([
+    'src/scripts/**/*.js'
+]).pipe($.plumber())
+    .pipe($.injectVersion({replace: '${ARIANG_VERSION}'}))
+    .pipe($.replace(/\${ARIANG_BUILD_COMMIT}/g, tryFn(git.short) || 'Local'))
+    .pipe(gulp.dest('.tmp/scripts'))
+    .pipe(reload({stream: true})));
+
+gulp.task('prepare-views', () => gulp.src([
+    'src/views/**/*.html'
+]).pipe($.htmlmin({collapseWhitespace: true}))
+    .pipe($.angularTemplatecache({module: 'ariaNg', filename: 'views/templates.js', root: 'views/'}))
+    .pipe(gulp.dest('.tmp/scripts')));
+
+gulp.task('prepare-html', gulp.series('prepare-styles', 'prepare-scripts', 'prepare-views', () => gulp.src([
+    'src/*.html'
+]).pipe($.useref({searchPath: ['.tmp', 'src', '.']}))
+    .pipe($.if('js/*.js', $.replace(/\/\/# sourceMappingURL=.*/g, '')))
+    .pipe($.if('css/*.css', $.replace(/\/\*# sourceMappingURL=.* \*\/$/g, '')))
+    .pipe($.if(['js/moment-with-locales-*.min.js', 'js/plugins.min.js', 'js/aria-ng.min.js'], $.uglify({output: {comments: saveLicense}})))
+    .pipe($.if(['css/plugins.min.css', 'css/aria-ng.min.css'], $.cssnano({safe: true, autoprefixer: false})))
+    .pipe($.replace(/url\((\.\.\/fonts\/[a-zA-Z0-9\-]+\.woff2)(\?[a-zA-Z0-9\-_=.]+)?\)/g, (match, fileName) => {
+        return 'url(' + fileName + ')'; // remove version of woff2 file (woff2 file should be cached via application cache)
+    }))
+    .pipe($.if(['js/plugins.min.js', 'js/aria-ng.min.js', 'css/plugins.min.css', 'css/aria-ng.min.css'], $.rev()))
+    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
+    .pipe($.revReplace())
+    .pipe(gulp.dest('.tmp'))));
+
+gulp.task('process-html', gulp.series('prepare-html', () => gulp.src([
+    '.tmp/*.html'
+]).pipe($.replace(/<!-- AriaNg-Bundle:\w+ -->/, ''))
+    .pipe(gulp.dest('dist'))));
+
+gulp.task('process-assets', gulp.series('process-html', () => gulp.src([
+    '.tmp/css/**/*',
+    '.tmp/js/**/*'
+], {base: '.tmp'})
+    .pipe(gulp.dest('dist'))));
+
+gulp.task('prepare-assets-bundle', () => gulp.src([
+    'src/favicon.png'
+]).pipe(gulp.dest('.tmp')));
+
+gulp.task('process-assets-bundle', gulp.series('prepare-fonts', 'prepare-langs', 'prepare-html', 'prepare-assets-bundle', () => gulp.src('.tmp/index.html')
+    .pipe($.replace(/<link rel="stylesheet" href="(css\/[a-zA-Z0-9\-_.]+\.css)">/g, (match, fileName) => {
+        const content = fs.readFileSync('.tmp/' + fileName, 'utf8');
+        return '<style type="text/css">' + content + '</style>';
+    }))
+    .pipe($.replace(/<script src="(js\/[a-zA-Z0-9\-_.]+\.js)"><\/script>/g, (match, fileName) => {
+        const content = fs.readFileSync('.tmp/' + fileName, 'utf8');
+        return '<script type="application/javascript">' + content + '</script>';
+    }))
+    .pipe($.replace(/url\(\.\.\/(fonts\/[a-zA-Z0-9\-]+\.woff)(\?[a-zA-Z0-9\-_=.]+)?\)/g, (match, fileName) => {
+        if (!fs.existsSync('.tmp/' + fileName)) {
+            return match;
+        }
 
-gulp.task('process-assets-bundle', ['prepare-fonts', 'prepare-langs', 'prepare-html', 'prepare-assets-bundle'], function () {
-    return gulp.src('.tmp/index.html')
-        .pipe($.replace(/<link rel="stylesheet" href="(css\/[a-zA-Z0-9\-_.]+\.css)">/g, function(match, fileName) {
-            var content = fs.readFileSync('.tmp/' + fileName, 'utf8');
-            return '<style type="text/css">' + content + '</style>';
-        }))
-        .pipe($.replace(/<script src="(js\/[a-zA-Z0-9\-_.]+\.js)"><\/script>/g, function(match, fileName) {
-            var content = fs.readFileSync('.tmp/' + fileName, 'utf8');
-            return '<script type="application/javascript">' + content + '</script>';
-        }))
-        .pipe($.replace(/url\(\.\.\/(fonts\/[a-zA-Z0-9\-]+\.woff)(\?[a-zA-Z0-9\-_=.]+)?\)/g, function(match, fileName) {
-            if (!fs.existsSync('.tmp/' + fileName)) {
-                return match;
-            }
+        const contentBuffer = fs.readFileSync('.tmp/' + fileName);
+        const contentBase64 = contentBuffer.toString('base64');
+        return 'url(data:application/x-font-woff;base64,' + contentBase64 + ')';
+    }))
+    .pipe($.replace(/<link rel="icon" href="([a-zA-Z0-9\-_.]+\.png)">/g, (match, fileName) => {
+        if (!fs.existsSync('.tmp/' + fileName)) {
+            return match;
+        }
 
-            var contentBuffer = fs.readFileSync('.tmp/' + fileName);
-            var contentBase64 = contentBuffer.toString('base64');
-            return 'url(data:application/x-font-woff;base64,' + contentBase64 + ')';
-        }))
-        .pipe($.replace(/<link rel="icon" href="([a-zA-Z0-9\-_.]+\.png)">/g, function(match, fileName) {
-            if (!fs.existsSync('.tmp/' + fileName)) {
-                return match;
+        const contentBuffer = fs.readFileSync('.tmp/' + fileName);
+        const contentBase64 = contentBuffer.toString('base64');
+        return '<link rel="icon" href="data:image/png;base64,' + contentBase64 + '">';
+    }))
+    .pipe($.replace('<!-- AriaNg-Bundle:languages -->', () => {
+        const langDir = '.tmp/langs/';
+        let result = '';
+        const fileNames = fs.readdirSync(langDir, 'utf8');
+
+        if (fileNames.length > 0) {
+            result = '<script type="application/javascript">' +
+                'angular.module("ariaNg").config(["ariaNgAssetsCacheServiceProvider", () => {';
+
+            for (const fileName of fileNames) {
+                let content = fs.readFileSync(langDir + fileName, 'utf8');
+
+                const lastPointIndex = fileName.lastIndexOf('.');
+                const languageName = fileName.substr(0, lastPointIndex);
+
+                content = content.replace(/\\/g, '\\\\');
+                content = content.replace(/\r/g, '');
+                content = content.replace(/\n/g, '\\n');
+                content = content.replace(/"/g, '\\"');
+                result += 'e.setLanguageAsset(\'' + languageName + '\',"' + content + '");';
             }
 
-            var contentBuffer = fs.readFileSync('.tmp/' + fileName);
-            var contentBase64 = contentBuffer.toString('base64');
-            return '<link rel="icon" href="data:image/png;base64,' + contentBase64 + '">';
-        }))
-        .pipe($.replace('<!-- AriaNg-Bundle:languages -->', function() {
-            var langDir = '.tmp/langs/';
-            var result = '';
-            var fileNames = fs.readdirSync(langDir, 'utf8');
-
-            if (fileNames.length > 0) {
-                result = '<script type="application/javascript">' +
-                    'angular.module("ariaNg").config(["ariaNgAssetsCacheServiceProvider",function(e){';
-
-                for (var i = 0; i < fileNames.length; i++) {
-                    var fileName = fileNames[i];
-                    var content = fs.readFileSync(langDir + fileName, 'utf8');
-
-                    var lastPointIndex = fileName.lastIndexOf('.');
-                    var languageName = fileName.substr(0, lastPointIndex);
-
-                    content = content.replace(/\\/g, '\\\\');
-                    content = content.replace(/\r/g, '');
-                    content = content.replace(/\n/g, '\\n');
-                    content = content.replace(/"/g, '\\"');
-                    result += 'e.setLanguageAsset(\'' + languageName + '\',"' + content + '");';
-                }
-
-                result += '}]);</script>';
-            }
+            result += '}]);</script>';
+        }
 
-            return result;
-        }))
-        .pipe($.replace(/<[a-z]+( [a-z\-]+="[a-zA-Z0-9\- ]+")* [a-z\-]+="((favicon.ico)|(tileicon.png)|(touchicon.png))"\/?>/g, ''))
-        .pipe(gulp.dest('dist'));
-});
+        return result;
+    }))
+    .pipe($.replace(/<[a-z]+( [a-z\-]+="[a-zA-Z0-9\- ]+")* [a-z\-]+="((favicon.ico)|(tileicon.png)|(touchicon.png))"\/?>/g, ''))
+    .pipe(gulp.dest('dist'))));
 
-gulp.task('process-full-extras', function () {
-    return gulp.src([
-        'LICENSE',
-        'src/*.*',
-        '!src/*.html'
-    ], {
-        dot: true
-    }).pipe(gulp.dest('dist'));
-});
+gulp.task('process-full-extras', () => gulp.src([
+    'LICENSE',
+    'src/*.*',
+    '!src/*.html'
+], {
+    dot: true
+}).pipe(gulp.dest('dist')));
 
-gulp.task('process-tiny-extras', function () {
-    return gulp.src([
-        'LICENSE'
-    ]).pipe(gulp.dest('dist'));
-});
+gulp.task('process-tiny-extras', () => gulp.src([
+    'LICENSE'
+]).pipe(gulp.dest('dist')));
 
-gulp.task('info', function () {
-    return gulp.src([
-        'dist/**/*'
-    ]).pipe($.size({title: 'build', gzip: true}));
-});
+gulp.task('info', () => gulp.src([
+    'dist/**/*'
+]).pipe($.size({title: 'build', gzip: true})));
 
-gulp.task('build', $.sequence('lint', 'process-fonts', 'process-langs', 'process-assets', 'process-full-extras', 'info'));
+gulp.task('build', gulp.series('lint', 'process-fonts', 'process-langs', 'process-assets', 'process-full-extras', 'info'));
 
-gulp.task('build-bundle', $.sequence('lint', 'process-assets-bundle', 'process-tiny-extras', 'info'));
+gulp.task('build-bundle', gulp.series('lint', 'process-assets-bundle', 'process-tiny-extras', 'info'));
 
-gulp.task('serve', ['prepare-styles', 'prepare-scripts', 'prepare-fonts'], function () {
+gulp.task('serve', gulp.series('prepare-styles', 'prepare-scripts', 'prepare-fonts', () => {
     browserSync({
         notify: false,
         port: 9000,
@@ -220,9 +187,9 @@ gulp.task('serve', ['prepare-styles', 'prepare-scripts', 'prepare-fonts'], funct
     gulp.watch('src/styles/**/*.css', ['prepare-styles']);
     gulp.watch('src/scripts/**/*.js', ['prepare-scripts']);
     gulp.watch('src/fonts/**/*', ['prepare-fonts']);
-});
+}));
 
-gulp.task('serve:dist', function () {
+gulp.task('serve:dist', () => {
     browserSync({
         notify: false,
         port: 9000,
@@ -232,6 +199,4 @@ gulp.task('serve:dist', function () {
     });
 });
 
-gulp.task('default', ['clean'], function () {
-    gulp.start('build');
-});
+gulp.task('default', gulp.series('clean', 'build'));

package.json

@@ -37,44 +37,38 @@
     "sweetalert": "^1.1.3"
   },
   "devDependencies": {
-    "browser-sync": "^2.26.14",
-    "del": "^4.1.1",
+    "browser-sync": "^2.27.7",
+    "del": "^6.0.0",
     "eslint-config-angular": "^0.5.0",
-    "eslint-plugin-angular": "^3.3.0",
-    "git-rev-sync": "^1.12.0",
-    "gulp": "^3.9.1",
+    "eslint-plugin-angular": "^4.1.0",
+    "git-rev-sync": "^3.0.1",
+    "gulp": "^4.0.2",
     "gulp-angular-templatecache": "^2.2.7",
-    "gulp-autoprefixer": "^6.1.0",
+    "gulp-autoprefixer": "^8.0.0",
     "gulp-cssnano": "^2.1.3",
     "gulp-eslint": "^4.0.2",
     "gulp-htmlmin": "^5.0.1",
-    "gulp-if": "^2.0.2",
+    "gulp-if": "^3.0.0",
     "gulp-inject-version": "^1.0.1",
-    "gulp-load-plugins": "^1.6.0",
+    "gulp-load-plugins": "^2.0.7",
     "gulp-plumber": "^1.2.1",
     "gulp-replace": "^1.0.0",
     "gulp-rev": "^9.0.0",
     "gulp-rev-replace": "^0.4.4",
-    "gulp-sequence": "^1.0.0",
-    "gulp-size": "^3.0.0",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-size": "^4.0.1",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",
-    "gulp-useref": "^3.1.6",
-    "gulp-util": "^3.0.8",
-    "natives": "^1.1.6",
-    "nice-try": "^2.1.0",
+    "gulp-useref": "^5.0.0",
+    "nice-try": "^3.0.0",
     "uglify-save-license": "^0.4.1"
   },
-  "resolutions": {
-    "graceful-fs": "^4.2.4"
-  },
   "name": "ariang",
   "description": "AriaNg, a modern web frontend making aria2 easier to use.",
   "version": "1.2.3",
   "main": "index.html",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 0",
-    "preinstall": "npx npm-force-resolutions"
+    "build": "gulp clean build"
   },
   "browsers": [
     "> 1%",