mirror of
https://github.com/S2-/minifyfromhtml.git
synced 2025-08-02 20:00:05 +02:00
Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5166260592 | |||
| f6eb8cfad8 | |||
| 32f7857516 | |||
| c4eea9da65 | |||
| 65dcc1916f | |||
| e58d000d4f | |||
| 5a7294bcf9 | |||
| 91ce9fe859 | |||
| 96dbb27eea | |||
| 01c4e4d60d |
2
.eslintignore
Normal file
2
.eslintignore
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/dist
|
||||
74
README.md
74
README.md
@@ -1,13 +1,77 @@
|
||||
# minifyfromhtml
|
||||
|
||||
This little helper minifies scripts and css starting from an html file. I made it after asking this question on stackoverflow: https://stackoverflow.com/questions/50188269/minify-js-and-css-in-one-go-starting-from-html/
|
||||
This little helper minifies scripts and css starting from an html file.
|
||||
|
||||
## What it is
|
||||
|
||||
I am making a `js` widget, like a map, or a calendar field or something. This is the `index.html` I use while developing the widget:
|
||||
|
||||
It takes an input html file, parses it, and outputs all included javascript and css files minified to a file you specify:
|
||||
```
|
||||
minifyfromhtml --js=<output js file> --css=<output css file> < <input file>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>example page</title>
|
||||
|
||||
<script src="somelib.js"></script>
|
||||
<script src="someotherlib.js"></script>
|
||||
<script src="awesomelib.js"></script>
|
||||
<script src="spectacularlib.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="some.css" />
|
||||
<link rel="stylesheet" type="text/css" href="app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="widget"></div>
|
||||
|
||||
<script>
|
||||
myapp(document.getElementById('widget'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
example:
|
||||
I am not using a framework like angular or react. I am coding along in `app.js`, and add libraries as I need them to `index.html`.
|
||||
|
||||
Then comes a time I want to distribute my widget to the world. To do that, I would like to
|
||||
|
||||
- minify all referenced js files in index.html
|
||||
- minify all css files
|
||||
|
||||
so that users of my widget can just include `widget.js` and `widget.css` and be good to go.
|
||||
|
||||
Is there something I can use that does that for me **with minimal hassle**? Something like
|
||||
|
||||
```
|
||||
minifyfromhtml --js=dist/mywidget.min.js --css=dist/mywidget.min.css < example/index.html
|
||||
$ magictool index.html
|
||||
- nice html you have. let me parse that and see what I need to do...
|
||||
- oh, you have somelib.js. let me minify that for you and put it in dist.js
|
||||
- oh, you have someotherlib.js. let me minify that for you and put it in dist.js
|
||||
- oh, you have awesomelib.js. let me minify that for you and put it in dist.js
|
||||
- oh, you have spectacularlib.js. let me minify that for you and put it in dist.js
|
||||
- oh, you have app.js. let me minify that for you and put it in dist.js
|
||||
- oh, you have some.css. let me minify that for you and put it in dist.css
|
||||
- oh, you have app.css. let me minify that for you and put it in dist.css
|
||||
! dist.js and dist.css created!
|
||||
```
|
||||
that reads `index.html` and creates a `dist.js` and `dist.css`.
|
||||
|
||||
the magictool is **minifyfromhtml**.
|
||||
|
||||
## Quickstart
|
||||
|
||||
```
|
||||
npm i -g minifyfromhtml
|
||||
minifyfromhtml --js=dist.js --css=dist.css < index.html
|
||||
```
|
||||
=>
|
||||
```
|
||||
some.css -> dist.css
|
||||
app.css -> dist.css
|
||||
somelib.js -> dist.js
|
||||
someotherlib.js -> dist.js
|
||||
awesomelib.js -> dist.js
|
||||
spectacularlib.js -> dist.js
|
||||
app.js -> dist.js
|
||||
```
|
||||
|
||||
1
dist/mywidget.min.css
vendored
1
dist/mywidget.min.css
vendored
@@ -1 +0,0 @@
|
||||
#mywidget{border:2px solid red}
|
||||
1
dist/mywidget.min.js
vendored
1
dist/mywidget.min.js
vendored
@@ -1 +0,0 @@
|
||||
var spectacularwidget=function(a){a.innerHTML="this is so spectacular!"};window.spectacularwidget=spectacularwidget;
|
||||
@@ -17,15 +17,15 @@ let usage = `usage:
|
||||
|
||||
if (argv.h) {
|
||||
console.log(usage);
|
||||
return;
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
if (!argv.js || !argv.css) {
|
||||
console.log(usage);
|
||||
return;
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
var excludeFiles = argv.exclude || [];
|
||||
let excludeFiles = argv.exclude || [];
|
||||
if (typeof(excludeFiles) === 'string') {
|
||||
excludeFiles = [excludeFiles];
|
||||
}
|
||||
@@ -40,7 +40,8 @@ let readStdin = function(cb) {
|
||||
process.stdin.on('end', function() {
|
||||
cb(stdin);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
readStdin(function(html) {
|
||||
let dom = new JSDOM(html);
|
||||
@@ -57,79 +58,49 @@ readStdin(function(html) {
|
||||
}
|
||||
}
|
||||
return scripts;
|
||||
}
|
||||
};
|
||||
|
||||
//process scripts
|
||||
let scripts = getTagAttrs(dom, 'script', 'src');
|
||||
|
||||
//remove exluded
|
||||
excludeFiles.forEach(i => {
|
||||
var index = scripts.indexOf(i);
|
||||
if (index !== -1) {
|
||||
scripts.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
let processedScripts = {};
|
||||
for (let i = 0; i < scripts.length; i++) {
|
||||
let script = scripts[i];
|
||||
|
||||
minify(script, 'stream')
|
||||
.then(function(data) {
|
||||
processedScripts[script] = data;
|
||||
|
||||
if (Object.keys(processedScripts).length === scripts.length) {
|
||||
//write scripts
|
||||
|
||||
//clear out dist file
|
||||
fs.writeFileSync(argv.js, '');
|
||||
|
||||
//write files
|
||||
for (let i = 0; i < scripts.length; i++) {
|
||||
const script = scripts[i];
|
||||
|
||||
console.log(script + ' -> ' + argv.js);
|
||||
fs.appendFileSync(argv.js, processedScripts[script] + '\n');
|
||||
}
|
||||
let processThings = function(things, outFile) {
|
||||
//remove exluded
|
||||
excludeFiles.forEach(i => {
|
||||
let index = things.indexOf(i);
|
||||
if (index !== -1) {
|
||||
things.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
let processedThings = {};
|
||||
for (let i = 0; i < things.length; i++) {
|
||||
let thing = things[i];
|
||||
|
||||
minify(thing)
|
||||
.then(function(data) {
|
||||
processedThings[thing] = data;
|
||||
|
||||
if (Object.keys(processedThings).length === things.length) {
|
||||
//write things
|
||||
|
||||
//clear out dist file
|
||||
fs.writeFileSync(outFile, '');
|
||||
|
||||
//write files
|
||||
for (let i = 0; i < things.length; i++) {
|
||||
const thing = things[i];
|
||||
|
||||
console.log(thing + ' -> ' + outFile);
|
||||
fs.appendFileSync(outFile, processedThings[thing] + '\n');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (argv.js) {
|
||||
processThings(getTagAttrs(dom, 'script', 'src'), argv.js);
|
||||
}
|
||||
|
||||
|
||||
//process css
|
||||
let styles = getTagAttrs(dom, 'link', 'href');
|
||||
|
||||
//remove exluded
|
||||
excludeFiles.forEach(i => {
|
||||
var index = styles.indexOf(i);
|
||||
if (index !== -1) {
|
||||
styles.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
let processedStyles = {};
|
||||
fs.writeFileSync(argv.css, '');
|
||||
for (let i = 0; i < styles.length; i++) {
|
||||
let style = styles[i];
|
||||
|
||||
minify(style, 'stream')
|
||||
.then(function(data) {
|
||||
processedStyles[style] = data;
|
||||
|
||||
if (Object.keys(processedStyles).length === styles.length) {
|
||||
//write styles
|
||||
|
||||
//clear out dist file
|
||||
fs.writeFileSync(argv.css, '');
|
||||
|
||||
//write files
|
||||
for (let i = 0; i < styles.length; i++) {
|
||||
const style = styles[i];
|
||||
|
||||
console.log(style + ' -> ' + argv.css);
|
||||
fs.appendFileSync(argv.css, processedStyles[style] + '\n');
|
||||
}
|
||||
}
|
||||
});
|
||||
if (argv.css) {
|
||||
processThings(getTagAttrs(dom, 'link', 'href'), argv.css);
|
||||
}
|
||||
});
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "minifyfromhtml",
|
||||
"version": "1.0.1",
|
||||
"version": "1.1.4",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
11
package.json
11
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "minifyfromhtml",
|
||||
"version": "1.1.0",
|
||||
"version": "1.1.4",
|
||||
"description": "minify scripts and css starting from an html file",
|
||||
"main": "minifyfromhtml.js",
|
||||
"scripts": {
|
||||
@@ -19,5 +19,12 @@
|
||||
},
|
||||
"bin": {
|
||||
"minifyfromhtml": "./minifyfromhtml.js"
|
||||
}
|
||||
},
|
||||
"keywords": [
|
||||
"minify",
|
||||
"javascript",
|
||||
"html",
|
||||
"css",
|
||||
"script"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user