我正在努力提高我网站的加载速度，我需要做的一件事就是缩小我所有的 CSS/JS。
我看到在线网站可以在几秒钟内缩小这些文件，所以我想知道为什么需要使用 Grunt、cssnano 和 Gulp 等技术。我认为这些技术不会每次都在页面加载时缩小这些文件，因为这会增加额外的开销，所以我很难找到使用它的优势。也许如果要缩小数百个文件，那么我可以看到优势，但我使用的 css 文件少于 10 个。
【问题讨论】：
标签： javascript css gruntjs gulp minify
优点？ Joel 测试的第 2 点：一步构建。
您可以拥有包含大量代码库的复杂项目，而构建它的唯一事情就是运行：
npm run build
然后部署...
【讨论】：
像（gulp、grunt、Webpack）这样的任务运行器对于一百种用途都非常有用。即使在小型项目中，您也可以获得以下优势：
性能：
在这个领域没有太多要解释的，使用连接和缩小结果的工具可以减少归档和请求，所有这些都是捆绑在一起的。
可读性：
在您的开发环境中，您可以阅读整个代码并使用工具来检查和/或验证它们，这对于避免进一步的问题非常有用！
可扩展性：
这是最重要的 IMO，与任务运行器一起运行一个正在运行的项目意味着（如果构建正确）在一个很好的代码中应用到另一个项目，或者在更大的范围内可能是相同的。
组织/节省时间：
例如，使用模块来模块化 HTML，您可以只包含 DOM 的“片段”并加载到您想要的任何页面中！想象一下，例如，您有一个名为“sale 01”的部分，它们附加在 50 个 html 页面中，想象一下如果您只是编辑 sale01.html 并且加载此内容的所有页面都已更改，那该有多疯狂！
热/实时重新加载：
当您更改不需要重新加载浏览器的代码时，任务运行器会为您执行此操作。
一旦配置完成，您就可以自动化您的流程。
Nice article saying about gulp。我不知道你的构建环境如何，所以我不能说哪种工具适合你的目的，但使用在线工具并不是自动化流程的最佳方式。
更新 1：
它是在新页面加载之前缩小 css/js，还是将它们缩小一次并创建一个包含缩小文件的新目录以供以后使用？
是的
一旦检测到文件已更改，它是否会重新缩小？
是的，如果您为此进行了设置。这里我只是在构建项目时缩小，它节省了我的时间。
【讨论】：
这完全是关于自动化和减少生成所需文件/资源的步骤数。大多数情况下，它就像保存一个 CSS/JS/HTML（模板）文件一样简单，它将运行缩小、连接、文件生成等。
其他时候，您可以像 grunt build 这样运行一个简单的命令，它会执行一系列不同的操作来构建生产环境所需的文件。
我个人使用 Grunt 并且总是注意保存我的 CSS、JS 和模板文件。
几个基本示例：
CSS
您更新了style.css 中的几个属性值。保存更改后，BOOM! style.min.css 会立即生成。好处是您不必将复制粘贴到网络（从您的帖子中我猜您要这样做 10 次），缩小然后从网络复制粘贴到本地文件。
此外，您通常希望缓存 bust CSS 文件。您可以通过将缓存破坏值添加到文件名或作为查询参数来实现。当您保存更改时，任务运行器也会执行此操作，BOOM! style-12345.min.css created 或 ?v=12345 在模板中自动更新。 您只需点击 CTRL+S 即可让这一切发生，或者键入并运行一个简单的命令 (grunt css)。
还有 CSS 预处理器，例如 SCSS 和 LESS，允许您在 CSS 中使用变量、函数等。任务运行程序可以在您执行连接、缩小等操作之前处理这些文件。同样，您只需保存一个文件，这一切都在后台进行。
JS
您的网站有几个小部件。您可以将所有代码编写并存储在script.js 中，或者您可以将每个小部件（以及其他脚本）保存在它们自己的文件中并将它们全部合并到一个文件中。如果您有一个任务运行器，并且您在更改脚本后立即将脚本存储在单独的文件中，BOOM! script.min.js 会生成。在缩小之前，您可能已经保存到a.js，这导致a.js、b.js 和c.js 被组合、检查（验证代码质量）和缩小。
您也不必担心是否正确复制粘贴每个文件，或者是否保存了缩小的结果，这一切都会发生。
您的文件可以自动完成许多事情，只需简单保存，并且无需您执行其他操作。
【讨论】：
既然 Gulp 或 Grunt 可以自动为您完成这项工作，为什么还要复制所有内容？您还可以指定应将编译后的代码放置在哪个文件夹和/或文件中。您可以将所有脚本或样式表编译到 1 个文件中。因此，您可以减少浏览器对文件的调用。它们在文件更改时编译，因此您甚至不会注意到它；）
【讨论】：
您从这个问题开始的地方（“为什么存在在线缩小器时，为什么要使用这些工具？”）和最终的问题（“为什么我选择当存在在线缩小器时使用这些工具？”）。
我不知道什么适合你的构建过程，所以如果你想通过在线压缩器手动输入每个文件，我不会告诉你不要这样做。
但为什么会选择像 grunt 这样的工具：
因为它可以成为可重复的自动化构建过程的一部分，这可能比仅仅缩小客户端资源更广泛。
是的，如果你有更多的资源，它可能更重要。但是，如果您希望做的不仅仅是一个生产版本，它也可能更重要。或者出于人们可能关心构建自动化的任何原因，真的。
【讨论】：