moved to webpack
parent
4a749dbd68
commit
5d52808b04
19
package.json
19
package.json
|
@ -4,15 +4,16 @@
|
|||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build": "node scripts/compile.js",
|
||||
"build:watch": "node scripts/compile.watch.js",
|
||||
"serve": "serve"
|
||||
"build": "webpack",
|
||||
"serve": "webpack serve --mode development --hot --port 3000"
|
||||
},
|
||||
"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"
|
||||
"css-loader": "^5.2.4",
|
||||
"sass": "^1.32.13",
|
||||
"sass-loader": "^11.1.1",
|
||||
"style-loader": "^2.0.0",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.37.1",
|
||||
"webpack-cli": "^4.7.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -6,8 +6,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Settings</title>
|
||||
|
||||
<link rel="stylesheet" href="./style.min.css">
|
||||
<script src="../scripts/ws.client.js"></script>
|
||||
<script src="bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,37 +0,0 @@
|
|||
# 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,0 @@
|
|||
require('./compiler').complie();
|
|
@ -1,27 +0,0 @@
|
|||
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);
|
|
@ -1,70 +0,0 @@
|
|||
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 };
|
|
@ -1,54 +0,0 @@
|
|||
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);
|
||||
})();
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
@ -0,0 +1 @@
|
|||
import "./style.scss";
|
|
@ -0,0 +1,40 @@
|
|||
var path = require("path");
|
||||
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "public"),
|
||||
filename: "bundle.js",
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: "url-loader",
|
||||
options: {
|
||||
limit: 8192,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
// Creates `style` nodes from JS strings
|
||||
"style-loader",
|
||||
// Translates CSS into CommonJS
|
||||
"css-loader",
|
||||
// Compiles Sass to CSS
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, "public"),
|
||||
compress: true,
|
||||
port: 3000,
|
||||
},
|
||||
};
|
Loading…
Reference in New Issue