From e58d000d4f573b52c9de85c1a78c644fde93facc Mon Sep 17 00:00:00 2001 From: s2 Date: Mon, 15 Apr 2019 16:14:44 +0200 Subject: [PATCH] update docs --- README.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ac8f85e..caee765 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,69 @@ # 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: + +``` + + + + example page + + + + + + + + + + + + +
+ + + + +``` + +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 ``` => ```