s2/minifyfromhtml
1
0
Fork 0
mirror of https://github.com/S2-/minifyfromhtml.git synced 2025-08-03 20:30:04 +02:00
Code Issues Releases Wiki Activity

Compare commits

base: s2:v1.1.0
Branches Tags
s2:master s2:dependabot/npm_and_yarn/word-wrap-1.2.4 s2:dependabot/npm_and_yarn/tough-cookie-and-tough-cookie-4.1.3 s2:dependabot/npm_and_yarn/minimist-1.2.6
s2:v2.0.7 s2:v2.0.6 s2:v2.0.5 s2:v2.0.4 s2:v2.0.3 s2:v2.0.2 s2:v2.0.1 s2:v2.0.0 s2:v1.3.0 s2:v1.2.1 s2:v1.2.0 s2:v1.1.7 s2:v1.1.6 s2:v1.1.5 s2:v1.1.4 s2:v1.1.3 s2:v1.1.2 s2:v1.1.1 s2:v1.1.0
...
compare: s2:v1.1.4
Branches Tags
s2:dependabot/npm_and_yarn/word-wrap-1.2.4 s2:dependabot/npm_and_yarn/tough-cookie-and-tough-cookie-4.1.3 s2:master s2:dependabot/npm_and_yarn/minimist-1.2.6
s2:v2.0.7 s2:v2.0.6 s2:v2.0.5 s2:v2.0.4 s2:v2.0.3 s2:v2.0.2 s2:v2.0.1 s2:v2.0.0 s2:v1.3.0 s2:v1.2.1 s2:v1.2.0 s2:v1.1.7 s2:v1.1.6 s2:v1.1.5 s2:v1.1.4 s2:v1.1.3 s2:v1.1.2 s2:v1.1.1 s2:v1.1.0

10 Commits
v1.1.0 ... v1.1.4

Author SHA1 Message Date
s2
5166260592 1.1.4 2019-05-27 17:09:27 +02:00
s2
f6eb8cfad8 add keywords 2019-05-27 17:08:33 +02:00
s2
32f7857516 v1.1.3 2019-04-16 20:31:34 +02:00
s2
c4eea9da65 just docs 2019-04-16 20:30:56 +02:00
s2
65dcc1916f v1.1.2 2019-04-15 16:14:56 +02:00
s2
e58d000d4f update docs 2019-04-15 16:14:44 +02:00
s2
5a7294bcf9 v1.1.1 2019-04-15 15:43:19 +02:00
s2
91ce9fe859 ignore dist 2019-04-15 15:42:49 +02:00
s2
96dbb27eea refactor 2019-04-15 15:42:39 +02:00
s2
01c4e4d60d quickstart 2019-04-15 12:09:09 +02:00
8 changed files with 125 additions and 82 deletions
Expand all files Collapse all files

2
.eslintignore Normal file
View File

@@ -0,0 +1,2 @@
node_modules
dist

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/dist

74
README.md
View File

@@ -1,13 +1,77 @@
# minifyfromhtml # 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
View File

@@ -1 +0,0 @@
#mywidget{border:2px solid red}

1
dist/mywidget.min.js vendored
View File

@@ -1 +0,0 @@
var spectacularwidget=function(a){a.innerHTML="this is so spectacular!"};window.spectacularwidget=spectacularwidget;

81
minifyfromhtml.js
View File

@@ -17,15 +17,15 @@ let usage = `usage:
if (argv.h) { if (argv.h) {
console.log(usage); console.log(usage);
return; process.exit(0);
} }
if (!argv.js || !argv.css) { if (!argv.js || !argv.css) {
console.log(usage); console.log(usage);
return; process.exit(0);
} }
var excludeFiles = argv.exclude || []; let excludeFiles = argv.exclude || [];
if (typeof(excludeFiles) === 'string') { if (typeof(excludeFiles) === 'string') {
excludeFiles = [excludeFiles]; excludeFiles = [excludeFiles];
} }
@@ -40,7 +40,8 @@ let readStdin = function(cb) {
process.stdin.on('end', function() { process.stdin.on('end', function() {
cb(stdin); cb(stdin);
}); });
} };
readStdin(function(html) { readStdin(function(html) {
let dom = new JSDOM(html); let dom = new JSDOM(html);
@@ -57,79 +58,49 @@ readStdin(function(html) {
} }
} }
return scripts; return scripts;
} };
//process scripts
let scripts = getTagAttrs(dom, 'script', 'src');
let processThings = function(things, outFile) {
//remove exluded //remove exluded
excludeFiles.forEach(i => { excludeFiles.forEach(i => {
var index = scripts.indexOf(i); let index = things.indexOf(i);
if (index !== -1) { if (index !== -1) {
scripts.splice(index, 1); things.splice(index, 1);
} }
}); });
let processedScripts = {}; let processedThings = {};
for (let i = 0; i < scripts.length; i++) { for (let i = 0; i < things.length; i++) {
let script = scripts[i]; let thing = things[i];
minify(script, 'stream') minify(thing)
.then(function(data) { .then(function(data) {
processedScripts[script] = data; processedThings[thing] = data;
if (Object.keys(processedScripts).length === scripts.length) { if (Object.keys(processedThings).length === things.length) {
//write scripts //write things
//clear out dist file //clear out dist file
fs.writeFileSync(argv.js, ''); fs.writeFileSync(outFile, '');
//write files //write files
for (let i = 0; i < scripts.length; i++) { for (let i = 0; i < things.length; i++) {
const script = scripts[i]; const thing = things[i];
console.log(script + ' -> ' + argv.js); console.log(thing + ' -> ' + outFile);
fs.appendFileSync(argv.js, processedScripts[script] + '\n'); fs.appendFileSync(outFile, processedThings[thing] + '\n');
} }
} }
}); });
} }
};
if (argv.js) {
//process css processThings(getTagAttrs(dom, 'script', 'src'), argv.js);
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 = {}; if (argv.css) {
fs.writeFileSync(argv.css, ''); processThings(getTagAttrs(dom, 'link', 'href'), 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');
}
}
});
} }
}); });

2
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{ {
"name": "minifyfromhtml", "name": "minifyfromhtml",
"version": "1.0.1", "version": "1.1.4",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

11
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "minifyfromhtml", "name": "minifyfromhtml",
"version": "1.1.0", "version": "1.1.4",
"description": "minify scripts and css starting from an html file", "description": "minify scripts and css starting from an html file",
"main": "minifyfromhtml.js", "main": "minifyfromhtml.js",
"scripts": { "scripts": {
@@ -19,5 +19,12 @@
}, },
"bin": { "bin": {
"minifyfromhtml": "./minifyfromhtml.js" "minifyfromhtml": "./minifyfromhtml.js"
} },
"keywords": [
"minify",
"javascript",
"html",
"css",
"script"
]
} }