1
0
mirror of https://github.com/S2-/minifyfromhtml.git synced 2025-08-02 20:00:05 +02:00

6 Commits

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
3 changed files with 77 additions and 9 deletions

View File

@@ -1,16 +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:
```
<!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>
```
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
```
$ 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 git+https://github.com/S2-/minifyfromhtml.git#semver:1.x
node node_modules\minifyfromhtml\minifyfromhtml.js --js=dist.js --css=dist.css < index.html
npm i -g minifyfromhtml
minifyfromhtml --js=dist.js --css=dist.css < index.html
```
=>
```
css/mywidget.css -> dist.css
js/jquery.js -> dist.js
js/spectacularwidget.js -> dist.js
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
```

2
package-lock.json generated
View File

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

View File

@@ -1,6 +1,6 @@
{
"name": "minifyfromhtml",
"version": "1.1.1",
"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"
]
}