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

Question

我使用多个样式表来组织CSS代码和目录文件夹，但是似乎@import在CSS中不应该使用？此外，似乎拼接你的代码（这就是@import的作用）并对其进行缩小（删除注释、空格，有时还会减少长变量）可以帮助网页加载速度的过程

使用npm是否有有效的方法在运行时拼接和缩小？或者最好是先开发所有内容，然后在准备分发时花时间拼接和缩小，而不是在构建页面时每次重新加载时都这样做

- user9789629

---

你可能正在寻找 https://webpack.js.org/ 或者像 Gulp/Grunt 这样的任务运行器。 - Ravenous

为什么不直接使用Gulp呢？它可以直接提供你所需的所有功能：https://gulpjs.com/ - andrralv

有人可能会建议使用Webpack（在我看来比较复杂），还有其他人可能会建议使用Gulp或其他资源管理流程。无论哪种方式，都有自动化工具集可供使用 - 请参见此问题 - https://dev59.com/MlsW5IYBdhLWcg3wXmS6 - Adam

那么这些工具比npm更好吗？那是它们的主要目的吗？我从未使用过gulp。 - user9789629

NPM仅是一个包管理器。可以通过NPM安装Gulp。这是一个常见的Gulp配置 - https://gist.github.com/Raven0us/9bbed34291b1a9b5ef84d7e9f03bc9ee。 - Ravenous

Answer 1

首先，你正在讨论两种不同的流程。它们之间有一个区别，即开发和生产环境。

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

稍后，一旦您可以说，是的，现在满足了所有要求并修复了所有错误，您开始进入生产环境。这将把TypeScript或ES6编译或转译成JavaScript，将SCSS、LESS等转换成CSS。此外，您的文件会被压缩，以减少加载时间。另外，您可以得到一个文件库，可以分发到您选择的服务器或其他发布服务。

在这个所谓的构建过程中，您创建一个public或dist(ributed)文件夹，其中存储了所有文件。与开发环境不同，只保留文件，而且大多数情况下是暂时性的。

一些流行的处理库包括：

• Webpack
• Gulp
• Browserify
• Grunt 等等。

典型的处理过程包括：

• 将许多文件合并为少量或更少的文件
• 压缩和缩小文件大小
• 将高级语言转换为浏览器可读代码（例如JS，CSS，HTML，JSON）

- Michael W. Czechowski

---

所以，我认为我的思路是正确的。当准备发布一个非开发版本时，我会创建一个dist文件夹，然后在那里进行缩小/合并/压缩等操作，其中所有针对开发的格式都可以被丢弃以用于加载时间。我只是不知道这个过程是否通常也在开发过程中完成。因此，我必须在每次更改时编译SAAS，因为它是一个开发工具，但我不会每次都重新缩小文件，因为那是浪费时间的，最后再进行缩小？ - user9789629

@Jordan 没错，你说得对。 - Michael W. Czechowski