Browse Source

moved to webpack

master
JayPY Code 6 months ago
parent
commit
5d52808b04
14 changed files with 53 additions and 230 deletions
  1. +10
    -9
      package.json
  2. +1
    -0
      public/bundle.js
  3. +1
    -2
      public/index.html
  4. +0
    -3
      public/style.min.css
  5. +0
    -27
      public/style.min.css.map
  6. +0
    -37
      scripts/README.md
  7. +0
    -1
      scripts/compile.js
  8. +0
    -27
      scripts/compile.watch.js
  9. +0
    -70
      scripts/compiler.js
  10. +0
    -54
      scripts/ws.client.js
  11. +0
    -0
      src/icons/sun.svg
  12. +0
    -0
      src/icons/temperature.svg
  13. +1
    -0
      src/index.js
  14. +40
    -0
      webpack.config.js

+ 10
- 9
package.json View File

@ -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"
}
}
}

+ 1
- 0
public/bundle.js
File diff suppressed because it is too large
View File


+ 1
- 2
public/index.html View File

@ -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>

+ 0
- 3
public/style.min.css
File diff suppressed because it is too large
View File


+ 0
- 27
public/style.min.css.map
File diff suppressed because it is too large
View File


+ 0
- 37
scripts/README.md View File

@ -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.

+ 0
- 1
scripts/compile.js View File

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

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

@ -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);

+ 0
- 70
scripts/compiler.js View File

@ -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 };

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

@ -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);
})();

public/icons/sun.svg → src/icons/sun.svg View File


public/icons/temperature.svg → src/icons/temperature.svg View File


+ 1
- 0
src/index.js View File

@ -0,0 +1 @@
import "./style.scss";

+ 40
- 0
webpack.config.js View File

@ -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…
Cancel
Save