diff --git a/gulpfile.js b/gulpfile.js
index b176d6085..54180f453 100644
--- a/gulpfile.js
+++ b/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)
diff --git a/package.json b/package.json
index 50470f8d0..9360e5586 100644
--- a/package.json
+++ b/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",
diff --git a/src/index.html b/src/index.html
index 8e9c8db3b..624be1936 100644
--- a/src/index.html
+++ b/src/index.html
@@ -105,5 +105,8 @@
+
+
+