我一直在帮助我的 friend 创建个人网站，我发现了这个 awesome jssor template用于图像幻灯片。它有三个版本deeply minified、without jquery 和with jquery。
我没有使用 jQuery 的经验，所以我决定使用没有 jQuery 的版本，我花了很多时间试图理解代码中实际发生的事情。然后我转向了深度缩小的版本，这非常简洁，因为一切都在没有对 css 或 js 文件的单一引用的情况下工作。
现在，在深度缩小 版本中，样式和脚本都写在一行中。我不打算将它们包含在帖子中，因为它们超过 30000 个字符，但所有文件都可以在上面提到的模板链接中找到。
我用过这个css unminifier - 还有这个 js unminifier - 以某种方式将它们转换成可读和可理解的格式。之后，我相应地创建了样式和 js 文件，并将未缩小的代码粘贴到那里。我已将文件的引用和路径添加到 html 的头部，但由于某种原因没有任何效果。
...
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="css/text" href="style/slidestyle.css">
<script src="js/script.js"></script>
<title></title>
</head>
...
您可能会问:“如果无需任何更改就可以正常工作，为什么我需要更改任何内容？”。没错，但在那种情况下，我不知道它是如何工作的，希望你同意我的看法，这很糟糕。
我的问题和询问是，如何正确地取消压缩 css 和 js 文件以及在 html 中引用它们的后记？我认为以这种方式做事不是一种常见的做法，但我希望能够理解事物的工作原理并在需要时进行更改。
更新:我想通了并提交给 GitHub .它适用于遇到类似问题或想更好地了解 slider 工作原理的任何人。
最佳答案
How to correctly unminify js and css
长话短说:你不知道；至少对于 JS 不是。
在 CSS 中，我知道的 minifyer 只去除空格、注释和尾随 ; 等等；转换 #FF0000 -> 红色之类的东西。一切仍然非常可读，所以添加一些换行符和空格会使代码看起来更容易。
在 JS 中，只有不必要的空格被删除，但所有局部变量和函数名都被(通常)单字符名称替换。通常在不同的上下文中对不同的事物使用相同的名称。更激进的压缩器甚至可以将您的代码结构更改为更短的内容。
几乎我们对代码的所有理解都是基于使用的名称和代码的结构；所以问题。
您可以尝试从缩小的代码中进行逆向工程，或者有时您必须在其他人的代码中修补某些内容，但除非您真的需要并且别无选择，否则您不会取消缩小代码。
Then I have moved to deeply minified version, what is pretty neat as everything works without a single reference to css or js files
不，不是，这是最后的选择解决方案，如果其他任何方法都失败的话。就像在您根本无法引用其他文件的环境中一样。
因为这 30kb 的 CSS-String 现在不能被浏览器缓存(如果你使用一个单独的文件，它们就会缓存)，而且在最坏的情况下，你在一个页面上添加这个 block 不止一次，所以它只会使您的 HTML 膨胀并降低您的页面速度。
You probably ask: "Why do I need to change anything if it works without any cahnges?". That's true, but in that case I've no idea how it's working and hope you agree with me that it's bad.
如果您想了解它的工作原理，请查看 jQuery 版本。由于 jQuery 是一个外部库，缩小器无法去除使用的方法名称。第二，代码更密集，因为您不必通读管理动画的代码，您只需阅读一个调用，将这些对象上的这些属性设置为这些值，等等。这可以让您在没有实现细节的情况下更好地理解这段代码中发生的事情。
关于javascript - 如何正确unminify js和css，并在html5中引用它们？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35682684/