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

Posted 2023-02-22

【中文标题】使用 npm 连接和缩小 HTML/CSS/JS 文件？

【英文标题】：Concatenating and Minifying HTML/CSS/JS files with npm?

【发布时间】：2018-10-25 13:06:57

【问题描述】：

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

使用 npm 是否有高效的方法在旅途中连接和缩小？还是最好全部开发，然后在准备好分发时花时间进行连接和缩小，而不是在构建页面时每次重新加载页面时都发生这种情况

【问题讨论】：

您可能正在寻找 webpack.js.org 或任何任务运行器，例如 Gulp/Grunt。

你为什么不直接使用 Gulp？它可以满足您开箱即用的所有需求：gulpjs.com

有些人可能会建议使用 Webpack（我认为这很复杂），有些人可能会建议使用 Gulp 或其他资产管理管道。无论哪种方式，您都可以使用一个自动化工具集来处理这个问题 - 请参阅这个问题 - ***.com/questions/35062852/…

那么这些工具比npm好？这就是目的，不是吗？我从没用过 gulp

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

【参考方案1】：

首先，您说的是两种不同的流程。 开发和生产环境是有区别的。

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

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

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

流行的处理库有：

Webpack Gulp Browserify Grunt 等等。

典型的流程是：

将许多文件连接成很少或更少的文件 压缩和缩小 将高级语言转换为浏览器可读代码（例如 JS、CSS、html、JSON）

【讨论】：

所以听起来我的思维过程是正确的。当准备好分发一个不用于开发的公共版本时，我创建了一个 dist 文件夹，这就是我可以执行 minify/concate/compressing/etc 的时候，其中所有用于开发的格式都可以被丢弃以供加载时间使用。我只是不知道这个过程是否通常也在开发过程中完成。所以我必须在每次更改时编译 SAAS，因为它是一个开发工具，但是，我不会每次都重新缩小文件，因为那是浪费时间，最后缩小？

@Jordan 没错，你一针见血。