mirror of
https://github.com/S2-/minifyfromhtml.git
synced 2025-08-03 12:20:04 +02:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5166260592 | |||
| f6eb8cfad8 | |||
| 32f7857516 | |||
| c4eea9da65 | |||
| 65dcc1916f | |||
| e58d000d4f |
73
README.md
73
README.md
@@ -1,16 +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:
|
||||||
|
|
||||||
|
```
|
||||||
|
<!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
|
## Quickstart
|
||||||
|
|
||||||
```
|
```
|
||||||
npm i git+https://github.com/S2-/minifyfromhtml.git#semver:1.x
|
npm i -g minifyfromhtml
|
||||||
node node_modules\minifyfromhtml\minifyfromhtml.js --js=dist.js --css=dist.css < index.html
|
minifyfromhtml --js=dist.js --css=dist.css < index.html
|
||||||
```
|
```
|
||||||
=>
|
=>
|
||||||
```
|
```
|
||||||
css/mywidget.css -> dist.css
|
some.css -> dist.css
|
||||||
js/jquery.js -> dist.js
|
app.css -> dist.css
|
||||||
js/spectacularwidget.js -> dist.js
|
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
2
package-lock.json
generated
@@ -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
11
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "minifyfromhtml",
|
"name": "minifyfromhtml",
|
||||||
"version": "1.1.1",
|
"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"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user