Я делаю виджет js, например карту, поле календаря или что-то в этом роде. Это index.html, который я использую при разработке виджета:
<!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>
Я не использую рамки типа угловых или реагирующих. Я пишу код в app.js и добавляю библиотеки по мере необходимости в index.html.
Затем наступает момент, когда я хочу распространить свой виджет по всему миру. Для этого я бы хотел
- свернуть все js-файлы, на которые есть ссылки, в index.html
- свернуть все CSS-файлы
так что пользователи моего виджета могут просто включить widget.js и widget.css и быть готовыми к работе.
Есть ли что-то, что я могу использовать, чтобы сделать это для меня с минимальными трудностями ? Что-то вроде
$ 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!
, который читает index.html и создает dist.js и dist.css.