from boilerplate
commit
c96f4daac8
|
@ -0,0 +1,3 @@
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
yarn.lock
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
@ -0,0 +1,2 @@
|
||||||
|
|
||||||
|
/*# sourceMappingURL=style.min.css.map */
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"file": "style.min.css",
|
||||||
|
"sources": [
|
||||||
|
"../src/style.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"mappings": ""
|
||||||
|
}
|
|
@ -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.
|
|
@ -0,0 +1 @@
|
||||||
|
require('./compiler').complie();
|
|
@ -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);
|
|
@ -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 };
|
|
@ -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);
|
||||||
|
})();
|
Loading…
Reference in New Issue