webpack, eslint

javascript didn't have proper modules until es6 what the fuck

bingo's code scares me so i hope i didn't break it when fixing
the linting errors

.eslintignore

@@ -0,0 +1 @@
+Js/Pixi.min.js

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-console": "off",
+        "no-unused-vars": [2, { "argsIgnorePattern": "^(success|event|resource|delta|reject)$"}],
+        "no-empty": ["error", { "allowEmptyCatch": true }]
+    }
+}

Js/Audio.js

@@ -1,5 +1,7 @@
 //(Math.exp(x)-1)/(Math.E-1)
 
+import bgmLoopData from './BgmLoop.json';
+
 class bufferLoader {
 	constructor(context, soundMap, callback) {
 		this.context = context;
@@ -94,8 +96,8 @@ class audioController {
 		source.buffer = this.loader.bufferList[sound];
 		source.loop = false;
 		if(type === "bgm") {
-			if(this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName]) {
+			if(bgmLoopData[this.utage.soundInfo[sound].origFileName]) {
-				let loop = this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName];
+				let loop = bgmLoopData[this.utage.soundInfo[sound].origFileName];
 				source.loopStart = loop["loop_start"]["seconds"];
 				source.loopEnd = loop["loop_end"]["seconds"];
 				source.loop = true;
@@ -182,3 +184,5 @@ class audioController {
 		this.sources = {};
 	}
 }
+
+export { audioController };

Js/Common.js

@@ -334,8 +334,10 @@ class commonFunctions {
 				if(props[i] == " ") { break; }
 				retval.color += props[i];
 			}
-			retval.color = retval.color;
+			//retval.color = retval.color;
 		}
 		return retval;
 	}
-}
+}
+
+export { rootUrl, baseDimensions, screenRatio, commonFunctions };

Js/Main.js

@@ -1,5 +1,17 @@
 'use strict';
 
+/* global PIXI */
+import 'Pixi';
+import { Player } from './Player.js';
+import { audioController } from './Audio.js';
+import { baseDimensions, commonFunctions } from './Common.js';
+import { UtageInfo } from './UtageParse.js';
+import { TextFunctions } from './TextFunctions.js';
+import { Shaders } from './Shaders.js';
+
+import '../Css/generic.min.css';
+import '../Css/main.css';
+
 const pixiApp = { 
 	app: new PIXI.Application(baseDimensions),
 	loader: PIXI.loader
@@ -215,9 +227,9 @@ function missionDropDownChanged(event) {
 			${chapterSelect}
 		</div>
 		<div id="modal-buttons">
-			<button onclick="closeMissionModal(event, false)">Close</button>
+			<button onclick="XduPlayer.closeMissionModal(event, false)">Close</button>
 			<span>MstId: ${mis.MstId}</span>
-			<button onclick="missionChanged(${mis.MstId})">Play</button>
+			<button onclick="XduPlayer.missionChanged(${mis.MstId})">Play</button>
 		</div>
 	</div>`;
 	document.getElementById("click-catcher").style.cssText = 'display: flex;';
@@ -424,7 +436,7 @@ function openHelpModal(event) {
 		<a style="margin-top: auto; text-align: center; "href="https://discord.gg/fpQZQ8g">YameteTomete Discord</a>
 		<div style="margin-top: auto; text-align: center;">All Symphogear content belongs to its respective owners</div>
 		<div id="modal-buttons">
-			<button onclick="closeModal(event)">Close</button>
+			<button onclick="XduPlayer.closeModal(event)">Close</button>
 			<a href="https://git.poweris.moe/xduplayer.git/" target="_blank">Source</a>
 		</div>
 	</div>`;
@@ -500,3 +512,22 @@ function onWindowResize(event, delay = 400) {
 		document.getElementById('app-container').style.cssText = `width: ${res.width}px; height: ${res.height}px;`;
 	}, delay);
 }
+
+export {
+	onBodyLoaded,
+	onBodyKey,
+	toggleMute,
+	onVolumeChange,
+	missionDropDownChanged,
+	languageChanged,
+	toggleFullscreen,
+	onMainClick,
+	openHelpModal,
+	playFromQuery,
+	skipClicked,
+	hideUiClicked,
+	dialogScrollUp,
+	dialogScrollDown,
+	closeMissionModal,
+	missionChanged
+};

Js/Player.js

@@ -1,5 +1,9 @@
 'use strict';
 
+/* global PIXI */
+import 'Pixi';
+import { baseDimensions, commonFunctions } from './Common.js';
+
 class Player {
 	constructor(pixi, utage, text, audio, shaderscript) {
 		this.pixi = pixi;
@@ -7,7 +11,7 @@ class Player {
 		this.utage = utage;
 		this.text = text;
 		this.audio = audio;
-		this.shaders = shaders;
+		this.shaders = shaderscript;
 		//consts
 		this.resolutionScale = 1; //I created this thinking that I would need to handle changing offset when resolution changes. But lucikly I can just scale the parent container and it works without needing this.
 		this.baseFps = 60; //I am assuming that PIXI is going to stay as keeping 60fps = delta1.
@@ -51,9 +55,9 @@ class Player {
 		return new Promise((resolve, reject) => {
 			let toLoadBgm = {};
 			let toLoadSe = {};
-			for(let i = 0; i < utage.currentPlayingFile.length; ++i) {
+			for(let i = 0; i < this.utage.currentPlayingFile.length; ++i) {
 				try {
-					let c = utage.currentPlayingFile[i];
+					let c = this.utage.currentPlayingFile[i];
 					if(c.comment) { continue; }
 					//They use this to set the sprite set for a charater but have an alternate name displayed
 					if(c.Arg2 && c.Arg2.toLowerCase().includes("<character=")) {
@@ -254,6 +258,7 @@ class Player {
 									break;
 								}
 							}
+							break;
 						}
 						case "attachit02":
 						case "attachit03":
@@ -269,6 +274,7 @@ class Player {
 							} else {
 								console.log(`Failed to get attacshot SE: se_ガトリング音`);
 							}
+							break;
 						case "attacshot11": 
 						case "attacshot12": 
 							if(this.utage.soundInfo['se_ガトリング音']) {
@@ -295,8 +301,7 @@ class Player {
 								console.log(`Failed to get attaclaser SE: se_レーザーが放たれる音`);
 							}
 							break;
-						case "":
+						default:
-							
 							break;
 					}
 				} catch (error) {
@@ -497,7 +502,7 @@ class Player {
 								try {
 									l.object.filters[0].uniforms.time = pos;
 									l.object.filters[0].apply();
-								} catch(error) {}
+								} catch(error) { }
 								break;
 							}
 							case "tint": {
@@ -585,13 +590,13 @@ class Player {
 						this.lerpTargets.push({type: 'alpha', object: sprite, curTime: 0, time: 300, finalV: 1, initV: 0});
 						this.lerpTargets.push({type: 'alpha', object: sprite, curTime: -(this.waitTime+500), time: 300, finalV: 0, initV: 1, post: "destroy"});
 					} catch (error) { }
-					let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
+					let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
 					this.text.titleText(true, text);
 					break;
 				}
 				case "divaeffect": {
 					this.waitTime = Number(cur.Arg5) * 1000;
-					let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
+					let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
 					this.text.divaText(true, text);
 					break;
 				}
@@ -749,7 +754,7 @@ class Player {
 				}
 				case "characteroff": {
 					if(cur.Text) {
-						checkPutText(cur);
+						this.checkPutText(cur);
 					} else {
 						this.text.dialogText(false, "");
 						this.text.characterName(false, "");
@@ -953,6 +958,7 @@ class Player {
 						this.lerpTargets.push({type: 'alpha', object: c3.sprite, curTime: (0 - (this.waitTime/2)), time: 200, finalV: 0, initV: 1, post: "destroy" });
 						this.currentCharacters['キャラ中央'] = undefined;
 					}
+					break;
 				}
 				case "noise_disappearance11": //103500341
 					this.waitTime = Number(cur.Arg1) * 1000;
@@ -984,8 +990,6 @@ class Player {
 					this.checkPutCharacterScreen(customCommand, false, true);
 					break;
 				}
-				case "continue01":
-					break;
 			}
 		} catch(error) {
 			console.log(error);
@@ -1198,13 +1202,12 @@ class Player {
 		}
 		if(!cur.Command && cur.Arg1 && cur.Text) {
 			//If its chracter off screen text
-			let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
+			let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
 			text = commonFunctions.convertUtageTextTags(text);
 			if(cur.Arg2 && cur.Arg2.toLowerCase() === "<off>") {
-				this.text.characterName(true, utage.charTranslations[cur.Arg1] || cur.Arg1);
+				this.text.characterName(true, this.utage.charTranslations[cur.Arg1] || cur.Arg1);
 				this.text.dialogText(true, commonFunctions.convertUtageTextTags(text));
 			} else {
-				let charName = "";
 				let found = false;
 				//Look for the character that is saying the text to get their name
 				//future note: This might be better to just look for the character in character info if this start failing.
@@ -1216,7 +1219,7 @@ class Player {
 						if(cur.Character) {
 							nameToUse = cur.Arg1;
 						}
-						this.text.characterName(true, utage.charTranslations[nameToUse] || nameToUse);
+						this.text.characterName(true, this.utage.charTranslations[nameToUse] || nameToUse);
 						this.text.dialogText(true, text);
 						this.currentCharacters[c].sprite.tint = 0xFFFFFF;
 						found = true;
@@ -1229,14 +1232,14 @@ class Player {
 				}
 				//If we didnt find the character just dump the text anyways with Arg1 as the name
 				if(!found) {
-					this.text.characterName(true, utage.charTranslations[cur.Arg1] || cur.Arg1);
+					this.text.characterName(true, this.utage.charTranslations[cur.Arg1] || cur.Arg1);
 					this.text.dialogText(true, text);
 				}
 			}
 			this.manualNext = true;
 		//Sometimes they don't give a Arg1 for the text.
 		} else if(!cur.Command && cur.Arg2.toLowerCase() === "<off>" && cur.Text) {
-			let text = cur.English ? (utage.translations[cur.English] || cur.Text) : cur.Text;
+			let text = cur.English ? (this.utage.translations[cur.English] || cur.Text) : cur.Text;
 			this.text.characterName(true, "");
 			this.text.dialogText(true, commonFunctions.convertUtageTextTags(text));
 			this.manualNext = true;
@@ -1324,6 +1327,7 @@ class Player {
 					this.lerpTargets.push({type: 'scale.y', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, 
 					finalV: curChar.sprite.scale.y * props.y, initV: curChar.sprite.scale.y });
 				}
+				break;
 			}
 			case "colorto": {
 				let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3);
@@ -1347,6 +1351,7 @@ class Player {
 						curChar.sprite.tint = color.color;
 					}
 				}
+				break;
 			}
 		}
 	}
@@ -1485,8 +1490,8 @@ class Player {
 	}
 	
 	getNextCommand() {
-		let command = utage.currentPlayingFile.pop();
+		let command = this.utage.currentPlayingFile.pop();
-		if(!utage.currentPlayingFile || utage.currentPlayingFile.length === 0) {
+		if(!this.utage.currentPlayingFile || this.utage.currentPlayingFile.length === 0) {
 			this.onEndFile();
 			return;
 		}
@@ -1514,7 +1519,7 @@ class Player {
 		return new Promise((resolve, reject) => {
 			try {
 				this.pixi.app.ticker.remove(this.onPixiTick, this);
-				utage.currentPlayingFile.length = 0;
+				this.utage.currentPlayingFile.length = 0;
 				this.currentCharacters = {};
 				this.layers = {};
 				this.currentCommand = undefined;
@@ -1548,4 +1553,6 @@ class Player {
 			}
 		});
 	}
-}
+}
+
+export { Player };

Js/Shaders.js

@@ -1,4 +1,9 @@
 //http://glslsandbox.com/e#39992.0
+
+/* global PIXI */
+import 'Pixi';
+import { baseDimensions } from './Common.js';
+
 class Shaders {
 	constructor() {
 		this.leftToRightFadeShader = `
@@ -199,4 +204,6 @@ class Shaders {
 			filterManager.applyFilter(this, input, output);
 		}
 	}
-}
+}
+
+export { Shaders };

Js/TextFunctions.js

@@ -84,7 +84,6 @@ class TextFunctions {
 		function putText() {
 			// skip over any HTML chars
 			this.dialogToDisplay.curPos = this.typeHtmlChars(this.dialogToDisplay.text, this.dialogToDisplay.curPos);
-			let substr = this.dialogToDisplay.text.substr(this.dialogToDisplay.curPos);
 			if (this.dialogToDisplay.curPos === this.dialogToDisplay.text.length) {
 				this.showNextIndicator(true);
 				this.scrollingText = false;
@@ -191,4 +190,6 @@ class TextFunctions {
 		this.scrollingText = false;
 		this.lineHeight = -1;
 	}
-}
+}
+
+export { TextFunctions };

Js/UtageParse.js

@@ -1,6 +1,8 @@
 //http://madnesslabo.net/utage/?page_id=4448&lang=en
 'use strict';
 
+import { commonFunctions } from './Common.js';
+
 class UtageInfo {
 	constructor() {
 		this.currentPlayingFile = [];
@@ -31,15 +33,15 @@ class UtageInfo {
 				//commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Scenario.tsv`),
 				commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Sound.tsv`), //4
 				commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Texture.tsv`), //5
-				commonFunctions.getFileJson(`${this.rootDirectory}Js/BgmLoop.json`), //6
+				//commonFunctions.getFileJson(`${this.rootDirectory}Js/BgmLoop.json`),
-				commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsCustom.json`), //7
+				commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsCustom.json`), //6
-				commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomCharacter.tsv`), //8
+				commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomCharacter.tsv`), //7
-				commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomSound.tsv`), //9
+				commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomSound.tsv`), //8
-				commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomTexture.tsv`), //10
+				commonFunctions.getFileText(`${this.rootDirectory}CustomData/Utage/Diva/Settings/CustomTexture.tsv`), //9
 			];
 			Promise.all(promises)
 			.then((success) => {
-				this.groupMissions(success[0], success[7]);
+				this.groupMissions(success[0], success[6]);
 				this.missionsList = Object.keys(this.groupedMissions).map((k) => {
 					return {Name: this.groupedMissions[k].Name, MstId: this.groupedMissions[k].MstId};
 				});
@@ -50,10 +52,10 @@ class UtageInfo {
 				//this.parseParamInfo(success[4]);
 				this.parseSoundInfo(success[4]);
 				this.parseTextureInfo(success[5]);
-				this.bgmLoopData = success[6];
+				//this.bgmLoopData = success[6];
-				this.parseCharacterInfo(success[8], true);
+				this.parseCharacterInfo(success[7], true);
-				this.parseSoundInfo(success[9], true);
+				this.parseSoundInfo(success[8], true);
-				this.parseTextureInfo(success[10], true);
+				this.parseTextureInfo(success[9], true);
 				resolve();
 			}, (failure) => {
 				reject(failure);
@@ -173,7 +175,7 @@ class UtageInfo {
 			if(this.charTranslationsInner[this.currentTranslation]) {
 				resolve();
 			} else {
-				commonFunctions.getFileJson(`${utage.rootDirectory}Js/Translations/nametranslations_${this.currentTranslation}.json`)
+				commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/nametranslations_${this.currentTranslation}.json`)
 				.then((success) => {
 					this.charTranslationsInner[this.currentTranslation] = success;
 					resolve();
@@ -191,8 +193,8 @@ class UtageInfo {
 				resolve();
 			} else {
 				var promises = [
-					commonFunctions.getFileJson(`${utage.rootDirectory}Js/Translations/XduMissionsNames_${this.currentTranslation}.json`),
+					commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsNames_${this.currentTranslation}.json`),
-					commonFunctions.getFileJson(`${utage.rootDirectory}Js/Translations/XduMissionsNamesCustom_${this.currentTranslation}.json`)
+					commonFunctions.getFileJson(`${this.rootDirectory}Js/Translations/XduMissionsNamesCustom_${this.currentTranslation}.json`)
 				];
 				Promise.all(promises)
 				.then((success) => {
@@ -362,4 +364,6 @@ class UtageInfo {
 	resetTranslations() {
 		this.translationsInner = {};
 	}
-}
+}
+
+export { UtageInfo };

Player.html

@@ -5,19 +5,19 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
 		<meta name="theme-color" content="#393939"/>
 		<title id="title-tag"></title>
-		<link rel="stylesheet" type="text/css" href="Css/generic.min.css">
+		<!-- <link rel="stylesheet" type="text/css" href="Css/generic.min.css">
-		<link rel="stylesheet" type="text/css" href="Css/main.min.css">
+		<link rel="stylesheet" type="text/css" href="Css/main.min.css">-->
 		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script> -->
 		<script src="Js/Pixi.min.js"></script>
 	</head>
-	<body onload="onBodyLoaded()" onkeyup="onBodyKey(event)">
+	<body onload="XduPlayer.onBodyLoaded()" onkeyup="XduPlayer.onBodyKey(event)">
 		<!-- <script src="Js/Common.js"></script>
 		<script src="Js/TextFunctions.js"></script>
 		<script src="Js/UtageParse.js"></script>
 		<script src="Js/Audio.js"></script>
 		<script src="Js/Player.js"></script>
 		<script src="Js/Main.js"></script> -->
-		<script src="Js/XduPlayer.min.js"></script>
+		<!-- <script src="Js/XduPlayer.js"></script> -->
 		<div id="loading-container" class="centered" style="z-index: 20;">
 			<h2 id="loading-utage">Loading Utage Data...</h2>
 			<h2 id="loading-font">Loading Page Data...</h2>
@@ -26,33 +26,33 @@
 			<div id="title-container"><span>Now Playing: </span><span id="playing-title">None</span></div>
 			<div id="other-controls-container">
 				<div id="volume-control">
-					<span onclick="toggleMute(event)" id="mute-button">&#128266;</span> <!-- loud_sound -->
+					<span onclick="XduPlayer.toggleMute(event)" id="mute-button">&#128266;</span> <!-- loud_sound -->
-					<input onchange="onVolumeChange(event)" id="volume-range" value="50" type="range" min="0" max="100" step="1"/>
+					<input onchange="XduPlayer.onVolumeChange(event)" id="volume-range" value="50" type="range" min="0" max="100" step="1"/>
 				</div>
-				<select id="select-mission" onchange="missionDropDownChanged(event);"></select>
+				<select id="select-mission" onchange="XduPlayer.missionDropDownChanged(event);"></select>
-				<select id="select-language" onchange="languageChanged(event);"></select>
+				<select id="select-language" onchange="XduPlayer.languageChanged(event);"></select>
-				<a style="font-size: 20px; margin-left: 5px;" title="info/help" onclick="openHelpModal(event)">?</a>
+				<a style="font-size: 20px; margin-left: 5px;" title="info/help" onclick="XduPlayer.openHelpModal(event)">?</a>
 			</div>
 			<!-- Im doing weird shit so that text container is always the base resolution of XDU (1334, 750). 
 			The canvas then resizes as the canvas does and the text-container uses transform scale based off this resolution -->
-			<div id="app-container" onclick="onMainClick(event);">
+			<div id="app-container" onclick="XduPlayer.onMainClick(event);">
 				<div id="text-container">
-					<div id="fullscreen-button" onclick="toggleFullscreen(event)">&#10133;</div> <!-- heavy_plus_sign -->
+					<div id="fullscreen-button" onclick="XduPlayer.toggleFullscreen(event)">&#10133;</div> <!-- heavy_plus_sign -->
 					<img id="main-ui-img" class="hidden" src="Images/newui_main.png"/>
-					<button id="play-from-query" onclick="playFromQuery(event)" style="display: none;">Play</button>
+					<button id="play-from-query" onclick="XduPlayer.playFromQuery(event)" style="display: none;">Play</button>
 					<div id="title" class="hidden">Title Text</div>
 					<div id="diva" class="hidden">Diva Text</div>
 					<div id="dialog-box" class="hidden">
 						<div id="ui-buttons">
-							<img class="ui-button" src="Images/skip_button.png" onclick="skipClicked(event)" id="skip-button"/>
+							<img class="ui-button" src="Images/skip_button.png" onclick="XduPlayer.skipClicked(event)" id="skip-button"/>
-							<img class="ui-button" src="Images/hide_button.png" onclick="hideUiClicked(event)"/>
+							<img class="ui-button" src="Images/hide_button.png" onclick="XduPlayer.hideUiClicked(event)"/>
 						</div>
 						<div id="character"></div>
 						<div id="dialog">
 							<div id="dialog-controls">
 								<div id="dialog-scroll" class="hidden">
-									<img id="dialog-scroll-up" src="Images/next_icon.png" onclick="dialogScrollUp(event)"/>
+									<img id="dialog-scroll-up" src="Images/next_icon.png" onclick="XduPlayer.dialogScrollUp(event)"/>
-									<img src="Images/next_icon.png" onclick="dialogScrollDown(event)"/>
+									<img src="Images/next_icon.png" onclick="XduPlayer.dialogScrollDown(event)"/>
 								</div>
 								<div id="dialog-next" class="hidden">
 									<img src="Images/next_icon.png"/>
@@ -64,7 +64,7 @@
 				</div>
 			</div>
 		</div>
-		<div id="click-catcher" style="display: none;" onclick="closeMissionModal(event, false)"></div>
+		<div id="click-catcher" style="display: none;" onclick="XduPlayer.closeMissionModal(event, false)"></div>
 		<div id="modal-container" style="display: none;"></div>
 		<div style="opacity: 0; position: fixed; top: -2000;">
 			<!-- <span style="font-family: 'FOT-RodinNTLGPro-B_0'">test</span>

README.md

@@ -1 +1,2 @@
-run `npm install` then `gulp dist` or `node(nodejs) node_modules/gulp/bin/gulp.js dist` to build files into Dist folder.
+run `npm install` then `npm start` to start a dev server or
+`npm run-script build` to build production files in the Dist folder.

gulpfile.js

@@ -1,130 +0,0 @@
-const gulp = require('gulp');
-const concat = require('gulp-concat');
-const rename = require('gulp-rename');
-const uglify = require('gulp-uglify-es').default;
-const sourcemaps = require('gulp-sourcemaps');
-const cssmin = require('gulp-cssmin');
-const jsonmin = require('gulp-jsonminify');
-
-const jsFiles = [
-"Js/Common.js",
-"Js/Shaders.js",
-"Js/TextFunctions.js",
-"Js/UtageParse.js",
-"Js/Audio.js",
-"Js/Player.js",
-"Js/Main.js"
-];
-const jsToCopy = [
-"Js/XduPlayer.min.js", 
-"Js/Pixi.min.js"
-];
-const cssFiles = [
-"Css/main.css"
-];
-const cssToCopy = [
-"Css/main.min.css",
-"Css/generic.min.css"
-];
-const jsonFiles = [
-"Js/BgmLoop.json",
-];
-const translations = [
-"Js/Translations/**"
-];
-
-const jsDest = "Js";
-gulp.task('dev', gulp.series(
-		buildJsDev,
-		buildCss,
-	)
-);
-
-gulp.task('dist', gulp.series(
-	gulp.parallel(
-			gulp.series(
-				buildJs,
-				copyJs
-			),
-			gulp.series(
-				buildCss,
-				copyCss
-			),
-			buildJson,
-			buildJsonTranslations,
-			copyHtml,
-			copyImages,
-			copyCustomData
-		),
-	)
-);
-
-gulp.task('watch', () => {
-	gulp.watch(cssFiles, {ignoreInitial: false}, gulp.series(buildCss)),
-	gulp.watch(jsFiles, {ignoreInitial: false}, gulp.series(buildJsDev));
-});
-
-function buildJs() {
-	return gulp.src(jsFiles)
-		.pipe(sourcemaps.init())
-		.pipe(concat('XduPlayer.js'))
-		.pipe(gulp.dest(jsDest))
-		.pipe(rename('XduPlayer.min.js'))
-		.pipe(uglify())
-		.pipe(sourcemaps.write(''))
-		.pipe(gulp.dest(jsDest));
-}
-
-function buildJsDev() {
-	return gulp.src(jsFiles)
-		.pipe(sourcemaps.init())
-		.pipe(concat('XduPlayer.js'))
-		.pipe(gulp.dest(jsDest))
-		.pipe(rename('XduPlayer.min.js'))
-		.pipe(sourcemaps.write(''))
-		.pipe(gulp.dest(jsDest));
-}
-
-function copyJs() {
-	return gulp.src(jsToCopy)
-		.pipe(gulp.dest('Dist/Js'));
-}
-
-function buildCss() {
-	return gulp.src('Css/main.css')
-        .pipe(cssmin())
-        .pipe(rename({suffix: '.min'}))
-        .pipe(gulp.dest('Css'));
-}
-
-function copyCss() {
-	return gulp.src(cssToCopy)
-		.pipe(gulp.dest('Dist/Css'));
-}
-
-function copyHtml() {
-	return gulp.src('Player.html')
-		.pipe(gulp.dest('Dist'));
-}
-
-function copyImages() {
-	return gulp.src('Images/**')
-		.pipe(gulp.dest('Dist/Images'));
-}
-
-function copyCustomData() {
-	return gulp.src('CustomData/**')
-		.pipe(gulp.dest('Dist/CustomData'));
-}
-
-function buildJson() {
-	return gulp.src(jsonFiles)
-        .pipe(jsonmin())
-        .pipe(gulp.dest('Dist/Js'));
-}
-
-function buildJsonTranslations() {
-	return gulp.src(translations)
-        .pipe(jsonmin())
-        .pipe(gulp.dest('Dist/Js/Translations'));
-}

package.json

@@ -3,14 +3,27 @@
 	"version": "1.0.0",
 	"private": true,
 	"license": "MIT",
+	"scripts": {
+		"start": "webpack-dev-server --content-base Dist/",
+		"build": "NODE_ENV=production webpack",
+		"lint": "eslint"
+	},
 	"devDependencies": {
-		"gulp": "github:gulpjs/gulp#4.0",
+		"@babel/core": "^7.4.4",
-		"gulp-concat": "~2.6.1",
+		"@babel/preset-env": "^7.4.4",
-		"gulp-cssmin": "~0.2.0",
+		"babel-loader": "^8.0.6",
-		"gulp-jsonminify": "^1.1.0",
+		"babel-plugin-syntax-dynamic-import": "^6.18.0",
-		"gulp-rename": "~1.2.2",
+		"copy-webpack-plugin": "^5.0.3",
-		"gulp-sourcemaps": "~2.6.4",
+		"css-loader": "^2.1.1",
-		"gulp-uglify": "~3.0.0",
+		"eslint": "^5.16.0",
-		"gulp-uglify-es": "~1.0.1"
+		"file-loader": "^3.0.1",
+		"html-webpack-plugin": "^3.2.0",
+		"jsonminify": "^0.4.1",
+		"mini-css-extract-plugin": "^0.6.0",
+		"style-loader": "^0.23.1",
+		"uglifyjs-webpack-plugin": "^2.1.2",
+		"webpack": "^4.31.0",
+		"webpack-cli": "^3.3.2",
+		"webpack-dev-server": "^3.3.1"
 	}
 }

webpack.config.js

@@ -0,0 +1,117 @@
+const webpack = require('webpack');
+const path = require('path');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const jsonminify = require('jsonminify');
+
+const devMode = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+	entry: "./Js/Main.js",
+	externals: {
+		Pixi: "PIXI"
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: "./Css/[name].css",
+			chunkFilename: "[id].css"
+		}),
+		new CopyWebpackPlugin([{
+			from: './Js/Translations/**/*json',
+			to: '.',
+			transform: (fileContent, path) => {
+				if (!devMode) {
+					 return Promise.resolve(jsonminify(fileContent.toString()))
+				}
+				return Promise.resolve(fileContent);
+			}
+		},
+		{
+			from: './Js/Pixi.min.js',
+			to: './Js/',
+		},
+		{
+			from: './Images/',
+			to: './Images/'
+		}]),
+		new HtmlWebPackPlugin({
+			template: './Player.html',
+			filename: './Player.html',
+			minify: devMode ? false : {
+				collapseWhitespace: true,
+				removeComments: true,
+				removeRedundantAttributes: true,
+				removeScriptTypeAttributes: true,
+				removeStyleLinkTypeAttributes: true,
+				useShortDoctype: true
+			}
+		})
+	],
+	module: {
+		rules: [
+			{
+				include: [path.resolve(__dirname, 'Js')],
+				loader: 'babel-loader',
+
+				options: {
+					plugins: ['syntax-dynamic-import'],
+
+					presets: [
+						[
+							'@babel/preset-env',
+							{
+								modules: false
+							}
+						]
+					]
+				},
+
+				test: /\.js$/
+			},
+			{
+				test: /\.css$/,
+				use: [MiniCssExtractPlugin.loader, "css-loader"],
+			},
+			{	test: /\.woff2$/,
+				loader: 'file-loader',
+				options: {
+					name: '[name].[ext]',
+					outputPath: './Fonts/',
+					publicPath: '/Fonts/',
+				}
+			}
+		]
+	},
+
+	output: {
+		chunkFilename: '[name].[chunkhash].js',
+		filename: 'Js/XduPlayer.js',
+		path: path.resolve(__dirname, 'Dist'),
+		libraryTarget: 'var',
+		library: 'XduPlayer'
+	},
+
+	devServer: {
+		index: 'Player.html'
+	},
+
+	mode: devMode ? 'development' : 'production',
+
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				vendors: {
+					priority: -10,
+					test: /[\\/]node_modules[\\/]/
+				}
+			},
+
+			chunks: 'async',
+			minChunks: 1,
+			minSize: 30000,
+			name: true
+		}
+	}
+};