Browse Source

from boilerplate

master
JayPY Code 7 months ago
commit
c96f4daac8
11 changed files with 238 additions and 0 deletions
  1. +3
    -0
      .gitignore
  2. +18
    -0
      package.json
  3. +17
    -0
      public/index.html
  4. +2
    -0
      public/style.min.css
  5. +9
    -0
      public/style.min.css.map
  6. +37
    -0
      scripts/README.md
  7. +1
    -0
      scripts/compile.js
  8. +27
    -0
      scripts/compile.watch.js
  9. +70
    -0
      scripts/compiler.js
  10. +54
    -0
      scripts/ws.client.js
  11. +0
    -0
      src/style.scss

+ 3
- 0
.gitignore View File

@ -0,0 +1,3 @@
/node_modules
yarn.lock

+ 18
- 0
package.json View File

@ -0,0 +1,18 @@
{
"name": "settings",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "node scripts/compile.js",
"build:watch": "node scripts/compile.watch.js",
"serve": "serve"
},
"devDependencies": {
"node-sass": "^5.0.0",
"node-sass-js-importer": "^4.0.3",
"serve": "^11.3.2",
"socket.io": "^4.0.1",
"watch": "^1.0.2"
}
}

+ 17
- 0
public/index.html View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings</title>
<link rel="stylesheet" href="./style.min.css">
</head>
<body>
</body>
</html>

+ 2
- 0
public/style.min.css View File

@ -0,0 +1,2 @@
/*# sourceMappingURL=style.min.css.map */

+ 9
- 0
public/style.min.css.map View File

@ -0,0 +1,9 @@
{
"version": 3,
"file": "style.min.css",
"sources": [
"../src/style.scss"
],
"names": [],
"mappings": ""
}

+ 37
- 0
scripts/README.md View File

@ -0,0 +1,37 @@
# Scripts
These are npm scripts to compile and run http server.
# File: compile.js
This file is a script that call reterial compiler once.
## How to run ?
You can run this file with nodejs
```
node ./compile.js
```
or use npm to run the script
```
npm run build
```
# File: compile.watch.js
This file is a script that call reterial compiler when *src* folder change.
## How to run ?
You can run this file with nodejs
```
node ./compile.watch.js
```
or use npm to run the script
```
npm run build:watch
```
# File: compiler.js
This file is a module that compile some files in *src* folder and write them on *dist* folder.
It compile *scss* files to *css* and minified version (*min.css*) and a map for maping!
# File: ws.client.js
This is a script runs in browser that listen to *socket.io* on file ```compile.watch.js```. It listen to changes and update css.

+ 1
- 0
scripts/compile.js View File

@ -0,0 +1 @@
require('./compiler').complie();

+ 27
- 0
scripts/compile.watch.js View File

@ -0,0 +1,27 @@
const
http = require('http').createServer(),
{ Server } = require('socket.io'),
{ join } = require('path'),
{ watchTree } = require('watch'),
{ complie } = require('./compiler');
const io = new Server(http, {
cors: {
origin: "*",
methods: ["GET", "POST"],
}
});
const src = join(__dirname, '..', 'src');
watchTree(src, async () => {
io.emit('prerefresh', {});
console.clear();
console.time("Compiled");
console.log("============================= COMPILEING =============================");
await complie();
console.timeEnd("Compiled");
io.emit('refresh', {});
});
http.listen(3000);

+ 70
- 0
scripts/compiler.js View File

@ -0,0 +1,70 @@
const
{ join } = require('path'),
{ writeFileSync } = require('fs'),
{ renderSync } = require('node-sass'),
importer = require('node-sass-js-importer');
/**
* inputs variable:
* scss file inputs that want be css
* WARNING: don't call files with 'src'! because output file don't need 'src'!!
*/
const inputs = [
'style.scss'
];
/**
* Write file
* @param {String} path output file path
* @param {Buffer} data complied data as buffer
*/
const write = async (path, data) => {
await writeFileSync(path, data);
}
/**
* Complie scss file to css
* @param {String} input scss file path
* @param {Boolean} minify minfiy css
*/
const exec = async (input, minify = true) => {
/**
* output variable:
* convert input file path to css output file path
* like: from/path/file.scss -> public/css/from/file.css
*
* the minfied version (.min.css) would be when minfiy be true
*/
let output = `public/${input}`.replace('scss', minify ? 'min.css' : 'css');
input = `src/${input}`; // link input to source folder
try {
let result = await renderSync({
file: join(__dirname, '..', input),
outputStyle: minify ? 'compressed' : 'expanded',
outFile: output,
sourceMap: true,
importer: [importer]
});
console.log(`${input} \t\t=>\t ${output}`);
output = join(__dirname, '..', output);
input = join(__dirname, '..', input);
await write(output, result.css);
await write(`${output}.map`, result.map);
} catch (error) {
console.error(error);
}
}
const complie = async () => {
for (let input of inputs) {
exec(input);
}
}
module.exports = { complie };

+ 54
- 0
scripts/ws.client.js View File

@ -0,0 +1,54 @@
let index = null;
const SOCKETIO_CLIENT = (from = 'https://cdn.jsdelivr.net/npm/socket.io-client@4.0.1/dist/socket.io.min.js') => {
let script = document.createElement('script');
script.src = from;
document.head.appendChild(script);
}
const CONNECT_TO_SERVER = () => {
const title = document.title; // document title
const socket = io('ws://localhost:3000');
socket.on("connect", () => {
console.log("[Reterial Compiler] Connected!");
});
socket.on("prerefresh", () => {
console.log("[Reterial Compiler] Refresh is comeing ...");
document.title = 'Refreshing ...';
})
socket.on("refresh", () => {
REFRESH();
console.clear();
console.log("[Reterial Compiler] Rereshed!");
document.title = title;
});
}
const REFRESH = () => {
let links = document.getElementsByTagName('link');
let newIndex = index ? index++ : 0;
for (let link of links) {
let href = link.href;
if (index == null) href = `${href}?index=${newIndex}`;
else href = href.replace(`?index=${index}`, `?index=${newIndex}`);
link.setAttribute('href', href);
}
index = newIndex;
}
(() => {
SOCKETIO_CLIENT();
setTimeout(() => {
CONNECT_TO_SERVER();
}, 1000);
})();

+ 0
- 0
src/style.scss View File


Loading…
Cancel
Save