Add browser lazy-sync

gulpfile.js

@@ -18,6 +18,8 @@ const stream = require('webpack-stream');
 const inject = require('gulp-inject');
 const postcss = require('gulp-postcss');
 const sass = require('gulp-sass');
+const gulpif = require('gulp-if');
+const lazypipe = require('lazypipe');
 
 sass.compiler = require('node-sass');
 
@@ -28,6 +30,30 @@ if (mode.production()) {
     config = require('./webpack.dev.js');
 }
 
+const options = {
+    javascript: {
+        query: ['src/**/*.js', '!src/bundle.js', '!src/standalone.js', '!src/scripts/apploader.js']
+    },
+    apploader: {
+        query: ['src/standalone.js', 'src/scripts/apploader.js']
+    },
+    css: {
+        query: ['src/**/*.css', 'src/**/*.scss']
+    },
+    html: {
+        query: ['src/**/*.html', '!src/index.html']
+    },
+    images: {
+        query: ['src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif', 'src/**/*.svg']
+    },
+    copy: {
+        query: ['src/**/*.json', 'src/**/*.ico']
+    },
+    injectBundle: {
+        query: 'src/index.html'
+    }
+};
+
 function serve() {
     browserSync.init({
         server: {
@@ -36,40 +62,89 @@ function serve() {
         port: 8080
     });
 
-    watch(['src/**/*.js', '!src/bundle.js'], series(javascript, standalone));
+    let events = ['add', 'change'];
-    watch('src/bundle.js', webpack);
-    watch('src/**/*.css', css);
-    watch(['src/**/*.html', '!src/index.html'], html);
-    watch(['src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif', 'src/**/*.svg'], images);
-    watch(['src/**/*.json', 'src/**/*.ico'], copy);
-    watch('src/index.html', injectBundle);
-}
 
-function standalone() {
+    watch(options.javascript.query).on('all', function (event, path) {
-    return src(['src/standalone.js', 'src/scripts/apploader.js'], { base: './src/' })
+        if (events.includes(event)) {
-        .pipe(concat('scripts/apploader.js'))
+            javascript(path);
-        .pipe(dest('dist/'))
+        }
-        .pipe(browserSync.stream());
+    });
+
+    watch(options.apploader.query, apploader(true));
+
+    watch('src/bundle.js', webpack);
+
+    watch(options.css.query).on('all', function (event, path) {
+        if (events.includes(event)) {
+            css(path);
+        }
+    });
+
+    watch(options.html.query).on('all', function (event, path) {
+        if (events.includes(event)) {
+            html(path);
+        }
+    });
+
+    watch(options.images.query).on('all', function (event, path) {
+        if (events.includes(event)) {
+            images(path);
+        }
+    });
+
+    watch(options.copy.query).on('all', function (event, path) {
+        if (events.includes(event)) {
+            copy(path);
+        }
+    });
+
+    watch(options.injectBundle.query, injectBundle);
 }
 
 function clean() {
     return del(['dist/']);
 }
 
-function javascript() {
+let pipelineJavascript = lazypipe()
-    return src(['src/**/*.js', '!src/bundle.js'], { base: './src/' })
+    .pipe(function () {
-        .pipe(mode.development(sourcemaps.init({ loadMaps: true })))
+        return mode.development(sourcemaps.init({ loadMaps: true }));
-        .pipe(babel({
+    })
+    .pipe(function () {
+        return babel({
             presets: [
                 ['@babel/preset-env']
             ]
-        }))
+        });
-        .pipe(terser({
+    })
+    .pipe(function () {
+        return terser({
             keep_fnames: true,
             mangle: false
-        }))
+        });
-        .pipe(mode.development(sourcemaps.write('.')))
+    })
+    .pipe(function () {
+        return mode.development(sourcemaps.write('.'));
+    });
+
+function javascript(query) {
+    return src(typeof query !== 'function' ? query : options.javascript.query, { base: './src/' })
+        .pipe(pipelineJavascript())
         .pipe(dest('dist/'))
+        .pipe(browserSync.stream());
+}
+
+function apploader(standalone) {
+    function task() {
+        return src(options.apploader.query, { base: './src/' })
+            .pipe(gulpif(standalone, concat('scripts/apploader.js')))
+            .pipe(pipelineJavascript())
+            .pipe(dest('dist/'))
+            .pipe(browserSync.stream());
+    };
+
+    task.displayName = 'apploader';
+
+    return task;
 }
 
 function webpack() {
@@ -78,8 +153,8 @@ function webpack() {
         .pipe(browserSync.stream());
 }
 
-function css() {
+function css(query) {
-    return src(['src/**/*.css', 'src/**/*.scss'], { base: './src/' })
+    return src(typeof query !== 'function' ? query : options.css.query, { base: './src/' })
         .pipe(mode.development(sourcemaps.init({ loadMaps: true })))
         .pipe(sass().on('error', sass.logError))
         .pipe(postcss())
@@ -88,28 +163,28 @@ function css() {
         .pipe(browserSync.stream());
 }
 
-function html() {
+function html(query) {
-    return src(['src/**/*.html', '!src/index.html'], { base: './src/' })
+    return src(typeof query !== 'function' ? query : options.html.query, { base: './src/' })
         .pipe(mode.production(htmlmin({ collapseWhitespace: true })))
         .pipe(dest('dist/'))
         .pipe(browserSync.stream());
 }
 
-function images() {
+function images(query) {
-    return src(['src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif', 'src/**/*.svg'], { base: './src/' })
+    return src(typeof query !== 'function' ? query : options.images.query, { base: './src/' })
         .pipe(mode.production(imagemin()))
         .pipe(dest('dist/'))
         .pipe(browserSync.stream());
 }
 
-function copy() {
+function copy(query) {
-    return src(['src/**/*.json', 'src/**/*.ico'], { base: './src/' })
+    return src(typeof query !== 'function' ? query : options.copy.query, { base: './src/' })
         .pipe(dest('dist/'))
         .pipe(browserSync.stream());
 }
 
 function injectBundle() {
-    return src('src/index.html', { base: './src/' })
+    return src(options.injectBundle.query, { base: './src/' })
         .pipe(inject(
             src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), { relative: true }
         ))
@@ -117,6 +192,10 @@ function injectBundle() {
         .pipe(browserSync.stream());
 }
 
-exports.default = series(clean, parallel(javascript, webpack, css, html, images, copy), injectBundle);
+function build(standalone) {
-exports.standalone = series(exports.default, standalone);
+    return series(clean, parallel(javascript, apploader(standalone), webpack, css, html, images, copy), injectBundle);
+}
+
+exports.default = build(false);
+exports.standalone = build(true);
 exports.serve = series(exports.standalone, serve);

package.json

@@ -24,6 +24,7 @@
     "gulp-cli": "^2.2.0",
     "gulp-concat": "^2.6.1",
     "gulp-htmlmin": "^5.0.1",
+    "gulp-if": "^3.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-inject": "^5.0.5",
     "gulp-mode": "^1.0.2",
@@ -32,6 +33,7 @@
     "gulp-sourcemaps": "^2.6.5",
     "gulp-terser": "^1.2.0",
     "html-webpack-plugin": "^3.2.0",
+    "lazypipe": "^1.0.2",
     "node-sass": "^4.13.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",

yarn.lock

@@ -3517,6 +3517,11 @@ duplexer3@^0.1.4:
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
+duplexer@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@@ -3527,6 +3532,16 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+duplexify@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.1.tgz#7027dc374f157b122a8ae08c2d3ea4d2d953aa61"
+  integrity sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==
+  dependencies:
+    end-of-stream "^1.4.1"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+    stream-shift "^1.0.0"
+
 each-props@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/each-props/-/each-props-1.3.2.tgz#ea45a414d16dd5cfa419b1a81720d5ca06892333"
@@ -3610,7 +3625,7 @@ encodeurl@~1.0.1, encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
@@ -4524,6 +4539,11 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
+fork-stream@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/fork-stream/-/fork-stream-0.0.4.tgz#db849fce77f6708a5f8f386ae533a0907b54ae70"
+  integrity sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -5064,6 +5084,15 @@ gulp-htmlmin@^5.0.1:
     plugin-error "^1.0.1"
     through2 "^2.0.3"
 
+gulp-if@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-if/-/gulp-if-3.0.0.tgz#6c3e7edc8bafadc34f2ebecb314bf43324ba1e40"
+  integrity sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==
+  dependencies:
+    gulp-match "^1.1.0"
+    ternary-stream "^3.0.0"
+    through2 "^3.0.1"
+
 gulp-imagemin@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz#d1810a908fb64b4fbf15a750d303d988443e68cf"
@@ -5096,6 +5125,13 @@ gulp-inject@^5.0.5:
     stream-to-array "^2.3.0"
     through2 "^3.0.1"
 
+gulp-match@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/gulp-match/-/gulp-match-1.1.0.tgz#552b7080fc006ee752c90563f9fec9d61aafdf4f"
+  integrity sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==
+  dependencies:
+    minimatch "^3.0.3"
+
 gulp-mode@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/gulp-mode/-/gulp-mode-1.0.2.tgz#33c76033491fb71f47f1ebf8c67561ad9da7dfc9"
@@ -6480,6 +6516,13 @@ last-run@^1.1.0:
     default-resolution "^2.0.0"
     es6-weak-map "^2.0.1"
 
+lazypipe@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lazypipe/-/lazypipe-1.0.2.tgz#b66f64ed7fd8b04869f1f1bcb795dbbaa80e418c"
+  integrity sha512-CrU+NYdFHW8ElaeXCWz5IbmetiYVYq1fOCmpdAeZ8L+khbv1e7EnshyjlKqkO+pJbVPrsJQnHbVxEiLujG6qhQ==
+  dependencies:
+    stream-combiner "*"
+
 lazystream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
@@ -7119,6 +7162,11 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
 merge2@^1.2.3, merge2@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
@@ -7216,7 +7264,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
+minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -10525,6 +10573,14 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
+stream-combiner@*:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.2.2.tgz#aec8cbac177b56b6f4fa479ced8c1912cee52858"
+  integrity sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=
+  dependencies:
+    duplexer "~0.1.1"
+    through "~2.3.4"
+
 stream-each@^1.1.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
@@ -11062,6 +11118,16 @@ tempfile@^2.0.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
+ternary-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ternary-stream/-/ternary-stream-3.0.0.tgz#7951930ea9e823924d956f03d516151a2d516253"
+  integrity sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==
+  dependencies:
+    duplexify "^4.1.1"
+    fork-stream "^0.0.4"
+    merge-stream "^2.0.0"
+    through2 "^3.0.1"
+
 terser-webpack-plugin@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
@@ -11129,7 +11195,7 @@ through2@^3.0.1:
   dependencies:
     readable-stream "2 || 3"
 
-through@^2.3.6, through@^2.3.8:
+through@^2.3.6, through@^2.3.8, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=