为什么要使用像Grunt, cssnano和Gulp这样的迷你工具呢?

优点?Joel测试的第二点:一步构建。

你可以有一个复杂的项目，有大量的代码库，你唯一要做的就是运行:

npm run build

然后部署…

像(gulp, grunt, Webpack)这样的任务运行程序在很多方面都非常有用。即使在很小的项目中，您也可以获得如下优势:

:
在这个领域，没有太多需要解释的，使用工具来连接和缩小结果在更少的存档和更少的请求，都在一个捆绑。

:
在您的开发环境中，您可以阅读整个代码并使用工具来检查和/或验证它们，这对于避免进一步的问题非常有用!

:
在我看来，这是最重要的，使用任务运行器工作一个正在运行的项目意味着(如果构建正确)在一个好的代码中应用到另一个项目，或者可能在更大的范围内相同。

组织/节省时间:
例如，使用模块来模块化HTML，您可以只包含DOM的"片段"并加载到您想要的任何页面中!想象一下，例如，你有一个名为"sale01"的部分，它们被附加在50个html页面中，想象一下，如果你只是编辑你的sale01.html，所有加载该内容的页面都被改变了，那将是多么疯狂!

热/生活重载:
当您更改代码时，您不需要重新加载浏览器，任务运行器将为您完成此操作。

你可以自动化你的过程，一旦它被配置。

关于gulp的好文章。我不知道你的构建环境如何，所以我不能说什么工具适合你的目的，但是使用在线工具并不是自动化你的过程的最佳方式。

UPDATE 1:
它是否在新页面加载之前最小化css/js，或者它是否将它们最小化一次并创建一个新的目录，其中包含稍后使用的最小化文件?
对
一旦检测到文件被更改，它是否会重新缩小?
是，如果你设置了这个。

这都是关于自动化和减少生成所需文件/资源的步骤。大多数情况下，它就像保存CSS/JS/HTML(模板)文件一样简单，它将运行缩小，连接，文件生成等。

其他时候，它是一个简单的命令，你运行像grunt build，做一堆不同的事情来构建你在生产环境中需要的文件。

我个人使用Grunt，并且总是注意保存我的CSS, JS和模板文件。

几个基本的例子:

CSS

在style.css中更新了几个属性值。保存更改后，BOOM!生成 style.min.css。好处是你不需要复制-n-粘贴到网络上(从你的帖子我猜你已经这样做了10次了)，缩小，然后从网络复制-n-粘贴到本地文件。

另外，您通常希望缓存bust CSS文件。可以通过将缓存破坏值添加到文件名或作为查询参数来实现这一点。当您保存更改时，任务运行器也会这样做，BOOM!创建的style-12345.min.css或?v=12345在模板中自动更新。所有你所要做的就是点击CTRL+S，或者键入并运行一个简单的命令(grunt css)。

也有像SCSS和LESS这样的CSS预处理器，允许你在CSS中使用变量、函数等。任务运行器可以在执行连接、缩小等操作之前处理这些文件。同样，所有的你所要做的就是保存一个文件，这一切都发生在后台。

JS

你的网站有几个小部件。您可以在script.js中编写和存储所有代码，也可以将每个小部件(与其他脚本一起)保存在它们自己的文件中，并将它们合并到一个文件中。如果您有一个任务运行器，并且您在更改一个脚本时将脚本存储在单独的文件中，那么BOOM!生成 script.min.js。在最小化之前，您可能已经保存到a.js，这将导致a.js, b.js和c.js合并，限制(验证代码质量)并最小化。

---

您也不必担心是否正确地复制-n-粘贴了每个文件，或者甚至保存了缩小的结果，这一切都会发生。

有许多事情可以神奇地自动完成你的文件，所有的简单保存和，不需要你的部分的其他操作。

当Gulp或Grunt可以自动为您完成时，为什么要复制所有内容?您还可以指定编译后的代码应该放在哪个文件夹或文件中。您可以将所有脚本或样式表编译到一个文件中。这样就可以减少浏览器对文件的调用。

你从哪里开始这个问题("为什么一个人会使用这些工具，当在线迷你器存在时?")和你在哪里结束它("为什么我选择使用这些工具，当在线迷你器存在时?")之间有巨大的差异。

我不能说什么对你的构建过程有效，所以如果你想通过在线minifier手动提供每个文件，我不会告诉你不要这样做。

但为什么会选择grunt这样的工具:

因为它可以成为可重复的自动化构建过程的一部分，这可能比仅仅减少客户端资源更广泛。

是的，如果你有更多的资源，这可能更重要。但是，如果您希望做的不仅仅是一个产品版本，那么这也可能更重要。或者出于人们可能关心构建自动化的任何原因，真的。