gpt4 book ai didi

javascript - 从html开始一次缩小js和css

转载 作者:行者123 更新时间:2023-11-30 06:55:07 24 4
gpt4 key购买 nike

我正在制作一个 js 小部件,例如 map 或日历字段等。这是我在开发小部件时使用的 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>

我没有使用 Angular 或 React 这样的框架。我在 app.js 中编码,并根据需要将库添加到 index.html

然后到了我想向全世界分发我的小部件的时候。为此,我想

  • 缩小 index.html 中所有引用的 js 文件
  • 缩小所有 css 文件

这样我的小部件的用户就可以只包含 widget.jswidget.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.jsdist.css

最佳答案

您可以使用 Browserify 获取那一束 .js 文件。

npmyarn安装魔术工具后,您可以执行以下操作:

浏览器化 js/*.js -o js/bundle.js -d

然后只需将 bundle.js 包含在您的 index.html 中。

注意:我会更新css的答案。

关于javascript - 从html开始一次缩小js和css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50188269/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com