Add dev server and finish build

gulpfile.js

@@ -1,13 +1,35 @@
 'use strict';
 
 const { src, dest, series, parallel } = require('gulp');
+const browserSync = require('browser-sync').create();
 const del = require('del');
 const babel = require('gulp-babel');
+const concat = require('gulp-concat');
 const terser = require('gulp-terser');
-const cssnano = require('gulp-cssnano');
 const htmlmin = require('gulp-htmlmin');
 const imagemin = require('gulp-imagemin');
 const sourcemaps = require('gulp-sourcemaps');
+const webpack_stream = require('webpack-stream');
+const webpack_config = require('./webpack.prod.js');
+const inject = require('gulp-inject');
+const postcss = require('gulp-postcss');
+const cssnano = require('cssnano');
+const autoprefixer = require('autoprefixer');
+
+function devBrowser() {
+    browserSync.init({
+        server: {
+            baseDir: "./dist"
+        },
+        port: 8080
+    });
+}
+
+function setStandalone() {
+    return src(['src/standalone.js', 'src/scripts/apploader.js'], {base: './src/'})
+    .pipe(concat('scripts/apploader.js'))
+    .pipe(dest('dist/'));
+}
 
 // Clean assets
 function clean() {
@@ -15,7 +37,7 @@ function clean() {
 }
 
 function javascript() {
-    return src('src/**/*.js', {base: './src/'})
+    return src(['src/**/*.js', '!src/bundle.js'], {base: './src/'})
     .pipe(sourcemaps.init({loadMaps: true}))
     .pipe(babel({
         presets: ['@babel/preset-env']
@@ -28,16 +50,24 @@ function javascript() {
     .pipe(dest('dist/'));
 }
 
+function webpack() {
+    return webpack_stream(webpack_config)
+    .pipe(dest('dist/'));
+}
+
 function css() {
     return src('src/**/*.css', {base: './src/'})
     .pipe(sourcemaps.init({loadMaps: true}))
-    .pipe(cssnano())
+    .pipe(postcss([
+        autoprefixer(),
+        cssnano()
+    ]))
     .pipe(sourcemaps.write('.'))
     .pipe(dest('dist/'));
 }
 
 function html() {
-    return src('src/**/*.html', {base: './src/'})
+    return src(['src/**/*.html', '!src/index.html'], {base: './src/'})
     .pipe(htmlmin({ collapseWhitespace: true }))
     .pipe(dest('dist/'));
 }
@@ -53,4 +83,13 @@ function copy() {
     .pipe(dest('dist/'))
 }
 
-exports.default = series(clean, parallel(javascript, css, html, images, copy))
+function injectBundle() {
+    return src('src/index.html', {base: './src/'})
+    .pipe(inject(
+        src(['src/scripts/apploader.js'], {read: false}, {base: './src/'}), {relative: true}
+    ))
+    .pipe(dest('dist/'))
+}
+
+exports.default = series(clean, parallel(javascript, webpack, css, html, images, copy), injectBundle)
+exports.run = series(exports.default, setStandalone, devBrowser)

package.json

@@ -7,17 +7,22 @@
   "devDependencies": {
     "@babel/core": "^7.8.6",
     "@babel/preset-env": "^7.8.6",
+    "autoprefixer": "^9.7.4",
+    "browser-sync": "^2.26.7",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
+    "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "eslint": "^6.8.0",
     "file-loader": "^5.0.2",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
-    "gulp-cssnano": "^2.1.3",
+    "gulp-concat": "^2.6.1",
     "gulp-htmlmin": "^5.0.1",
     "gulp-imagemin": "^7.1.0",
+    "gulp-inject": "^5.0.5",
+    "gulp-postcss": "^8.0.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-terser": "^1.2.0",
     "html-webpack-plugin": "^3.2.0",
@@ -30,7 +35,8 @@
     "webpack-cli": "^3.3.10",
     "webpack-concat-plugin": "^3.0.0",
     "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^4.2.2",
+    "webpack-stream": "^5.2.1"
   },
   "dependencies": {
     "alameda": "^1.4.0",

src/index.html

@@ -105,5 +105,8 @@
     <div class="skinHeader focuscontainer-x"></div>
     <div class="mainAnimatedPages skinBody"></div>
     <div class="mainDrawerHandle"></div>
+
+    <!-- inject:js -->
+    <!-- endinject -->
 </body>
 </html>

webpack.common.js

@@ -23,11 +23,6 @@ module.exports = {
         ]
     },
     plugins: [
-        new CleanWebpackPlugin(),
-        new CopyPlugin([{
-            from: "**/*",
-            to: "."
-        }]),
         new CopyPlugin(
             Assets.map(asset => {
                 return {