使用 Grunt 加速 WordPress 开发

构建工具是每个开发人员工具包的重要组成部分，可让您专注于高效开发，而不会陷入可能分散您手头代码的小细节。 一种流行的构建工具是 Grunt。

我们最近研究了如何使用 Gulp 进行 WordPress 开发。 Gulp 是一个很棒的工具，可以优化你的主题图像，连接你的 JS 文件，并自动处理你的 Sass/LESS 代码。

虽然 Grunt 与 Gulp 相似，但也有一些区别。 在这篇文章中，我将带您了解 Grunt 提供的功能、如何使用它以及它与 Gulp 的不同之处。

继续阅读，或使用以下链接跳转：

• 构建工具简介
• 开始使用 Grunt
• 创建任务
• 缩小文件
• Gulp 和 Grunt 比较
• 在 Gulp 和 Grunt 之间进行选择

构建工具简介

构建工具基本上是一种自动化工具，可以快速轻松地为您完成琐碎的任务。 您可以从多个文件中创建一个文件，将用 Markdown 编写的文档转换为 HTML，还可以做各种其他简洁的事情。

在我最近的 Gulp 文章中，我解释了构建系统是什么，如何使用两种不同的方法来组织文件以及其他一些基本内容。 我强烈建议您在继续阅读这篇文章之前先阅读那篇文章。 除了语法之外，Gulp 和 Grunt 的基本原理和理念完全相同。

开始使用 Grunt

与 Gulp 一样，您需要 Node 来运行 Gulp。 如果您手边没有它，请前往 nodejs.org 并获取安装程序。 将安装 Node 以及 npm（节点包管理器），可用于安装 Grunt 等 Node 包。

接下来我们将全局安装 Grunt。 您可以通过在 Windows 中打开终端或命令提示符（从现在开始将它们都称为终端）并发出以下命令来执行此操作：

接下来我们需要创建两个文件： package.json 和 Gruntfile.js. 让我们从 package.json，这是一个标准的 Node 包文件。 我们只会添加一点点信息，请查看 npm 文档了解更多信息。

包文件命名我们的包并给它一个版本号。 我们真正在这里寻找的是 devDependencies 部分。 这列出了我们将使用的所有依赖项。 现在，我们只需要 Grunt 本身——我们很快就会添加更多！

这 Gruntfile.js 类似于 Gulp 的 Gulpfile——它告诉 Grunt 我们希望它做什么以及我们希望它响应哪些命令。

这 initConfig() 函数是我们编写所有任务内容的地方。 然后我们将在下面注册任务，当我们给它特定的命令时，它会告诉 grunt 它应该运行哪些任务。 我现在创建了一个空的默认任务。

创建任务

创建任务的方法类似于我们为 Gulp 所做的：

• 安装包
• 包括包裹
• 在 Gulpfile 中使用它

让我们从 Sass 开始，就像我们在另一篇文章中所做的那样。 首先，安装软件包：

接下来，require 中的模块 Gruntfile.

全做完了！ 我们现在可以编写一个将 Sass 转换为 CSS 的任务。 这是完整的代码，下面有解释：

首要任务是包含模块，您可以在上方看到 initConfig() 功能。 在所述功能中，我放置了一个名为 sass. 这些选项告诉 Grunt 当前的工作目录是什么 (cwd)、要处理的源文件、目标目录和文件扩展名。

最后，我添加了使用默认命令运行的任务。 跑步 grunt 从终端将导致 styles/styles.scss 正在处理并输出到 styles.css 在主目录中。

我认为从这个简短的示例中可以明显看出，Gulp 的可读性和逻辑性远不如 Gulp —— 至少在我看来。 稍后再详细介绍！

缩小文件

如果你想缩小这些生成的 CSS 文件，你需要 grunt-contrib-cssmin 模块。 使用安装它 npm install grunt-contrib-cssmin --save-dev 命令并通过放置将其添加为要求 grunt.loadNpmTasks('grunt-contrib-cssmin'); 在你的 Gruntfile 中。

完成所有这些后，让我们进行实际的缩小。 这是如何做：

如您所见，这与以前的想法相似。 除此之外，我已将任务添加到我的默认命令中： grunt.registerTask('default', ['sass', 'cssmin'] );.

Gulp 和 Grunt 比较

如果您已阅读 Gulp 文章并在本文中了解了这一点，那么您应该能够找出我在上一篇文章中解释的其他方法。 这是安装模块并将任务添加到文件中的问题。 所有包都有很好的文档和示例用法，所以你应该没有问题实施。

但是，您可能感兴趣的是 Gulp 和 Grunt 之间的区别以及何时使用它们。

两个系统最大的区别是 任务结构. 简而言之，Gulp 更容易阅读，但编写起来更容易混淆，因为管道机制可能导致任务中的意大利面条式编码。

就个人而言，我更喜欢 Gulp，因为我希望我的代码是可读的，所以我知道一年后我想用它做什么，只需看一眼它。 如果您在大型团队或大型项目中工作，您可能希望支持 Grunt，因为它的方法更严格。

另一个重要因素是 速度. 吞咽是 很多 更快，因为它处理内存中的所有内容。 Grunt 使用中间文件。 磁盘 IO 操作比内存操作更耗时，这使得 Grunt 的速度大约是 Gulp 的两倍。

也就是说，这对大多数人来说并不是一个重要的考虑因素。 一个任务需要 0.04 秒还是 0.08 秒真的很重要吗？ 在大范围内，这可能会成为一个问题，但对于我们绝大多数人来说，我们永远不会注意到。

我注意到的一件事是，写得不太好的任务可能会导致 Gulp 内部不稳定。 这很可能是我的白痴，但我见过一些 Gulp 对我冻结一两秒的情况。 我觉得这是因为它使用内存，磁盘操作（在 Grunt 的情况下）不会有这个问题。 这是完全不科学的，如果你们对此有更深入的经验，请告诉我们！

有一段时间，Grunt 拥有一个更大的社区，因为它是一个较旧的项目。 最近 Gulp 接手了，轻松地将 Grunt 丢在了尘埃中。 目前，这两种解决方案都拥有庞大且活跃的社区。

在 Gulp 和 Grunt 之间进行选择

我已经权衡了我的偏好——我每次都选择 Gulp。 我发现它的编写和阅读方式更清晰，管道机制在我看来更合乎逻辑。 我认为这实际上是最重要的因素。

由于两个系统大致相同，因此归结为个人喜好。 你喜欢 Grunt 是因为你喜欢它提供的更好的风格吗？ 厉害了，加油

只有两种情况我会建议选择一种而不是另一种。 如果您已经在大多数项目中使用其中之一，那么继续使用相同的解决方案可能是个好主意。 尽管 Gulp 有速度优势，但我不会说 太棒了 最好把 Grunt 扔出窗外。

另一种情况是，如果您真的要处理大量的任务列表和一堆文件。 从理论上讲，Gulp 会更好地为您服务，但我的建议是使用这两个系统编写几个任务，看看哪一个在速度方面效果更好。

Gulp 和 Grunt 都很棒。 他们解决了大量的问题，让我们的生活每天都变得更好。 无论您是从事 WordPress 项目还是其他项目，构建工具总是一个好主意。

标签：

• 构建工具