使用npm连接和缩小HTML / CSS / JS文件？

Question

我使用多个样式表来组织CSS代码和目录文件夹，但似乎@import不应该在CSS中使用？ 此外，它似乎也可以整合你的代码（这是@import所做的）并缩小它（删除注释，空格，有时减少长变量）可以帮助加载网页上的加载时间。

使用npm有没有有效的方法来连续缩小和缩小？ 或者最好是全部开发，然后当它准备好分发时花时间来缩小和缩小，而不是在构建页面时每次重新加载页面时都会发生这种情况

Answer 1

首先，您谈论的是两种不同的流程。 开发和生产环境之间存在差异。

作为开发人员，您自然依赖于开发环境 。 建议在每次更改文件时重新编译文件。 这些不必缩小，但有关样式的所有内容，例如SCSS文件，应该转换为浏览器可读格式，即CSS。

之后，只要您说，是的，现在满足所有要求并修复所有错误，您就开始生产 。 这编译或者更确切地说是在CSS中的TypeScript或ES6以及CSS中的SCSS，LESS等。 此外，您的文件也会被压缩，从而减少加载时间。 您还有一个文件存储库，可以分发到您选择的服务器或其他发布服务。

在这个所谓的构建过程中，您可以创建一个public或dist （ributed）文件夹，其中存储了所有文件。 与开发环境不同，开发环境只保留文件或多或少的临时文件。

流行的处理库是：

• 的WebPack
• 吞
• Browserify
• 咕噜等等。

典型的流程是：

• 将许多文件同步到少数或更少的文件
• 压缩和缩小
• 将更高级的语言向下扩展到浏览器可读代码（例如JS，CSS，HTML，JSON ）