manuth/ConnectForce
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add capability of automatically reloading files

Browse source
This commit is contained in:
Manuel Thalmann 2022-12-04 21:26:31 +01:00
parent 40144c1dd6
commit 632091a0d8
4 changed files with 1581 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
gulpfile.ts
View file

@ -1,7 +1,11 @@
import GulpClient from "gulp";
import browserSync, { BrowserSyncInstance } from "browser-sync";
import GulpClient, { TaskFunction } from "gulp";
import path from "upath";
import { Context } from "./gulp/Context.js";
const { dest, parallel, src } = GulpClient;
const { dest, parallel, series, src, watch } = GulpClient;
const { join } = path;
const context = new Context();
/**
@ -80,3 +84,73 @@ export function Build(): Promise<void>
});
});
}
/**
* Reloads all browsers using `browser-sync`.
*
* @param syncer
* The browser-sync instance to work on.
*
* @param filePath
* A glob-path which points to the files which must be reloaded.
*
* @returns
* The actual task.
*/
function BrowserSync(syncer: BrowserSyncInstance, filePath?: string): TaskFunction
{
let BrowserSync: TaskFunction = (done) =>
{
if (filePath)
{
syncer.reload(filePath);
}
else
{
syncer.reload();
}
done();
};
return BrowserSync;
}
/**
* Builds and watches the files for changes.
*/
export function Watch(): void
{
let syncer = browserSync.create();
Build();
syncer.init({
open: false,
server: context.StaticPath(),
online: false
});
watch(
context.SourcePath(context.JSDirName),
series(
JavaScript,
BrowserSync(syncer, "*.js")));
watch(
context.SourcePath(context.StyleDirName, "**", "*.css"),
series(
Styles,
BrowserSync(syncer, "*.css")));
watch(
context.SourcePath(context.AssetDirName),
series(
Assets,
BrowserSync(syncer, join(context.AssetDirName, "**", "*"))));
watch(
context.SourcePath("**", "*.html"),
series(
WebPages,
BrowserSync(syncer, "*.html")));
}

1492
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -12,8 +12,10 @@
"devDependencies": {
"@manuth/eslint-plugin-typescript": "^4.0.0",
"@manuth/tsconfig": "^3.0.2",
"@types/browser-sync": "^2.26.3",
"@types/gulp": "^4.0.10",
"@types/node": "^18.11.10",
"browser-sync": "^2.27.10",
"cross-env": "^7.0.3",
"eslint": "^8.23.1",
"gulp": "^4.0.2",

14
src/index.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Connect Four</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
äh
</body>
</html>