终极 WordPress 开发环境

在过去的几年里，我在 WPMU DEV 博客上写了很多教程，我在其中分享了关于我使用的开发环境的花絮。

所以今天，我认为是时候分享一个完整的环境了，我将把它放在一起并用于更大规模的开发。

卷起袖子，准备好弄脏你的手吧！ 因为下面是我建立的那种开发环境的完整演练，以及你是如何做到的。

注意：本教程不适合初学者。 如果您是 WordPress 开发新手，则不需要如此复杂的环境，因为它可能会引入不必要的复杂性。 另请注意，本文专门针对 WordPress。 非 WordPress 项目的想法和目标可能相同，但使用的方法和工具会有所不同。

目录

1. 1. 什么是良好的开发环境
   2. 不断发展的环境
   3. 本地服务器
   4. 命令行工具
   5. Bash 脚本
   6. WordPress 插件
   7. 杂项工具

什么是良好的开发环境？

在我看来，一个好的开发环境具有以下三个属性：

1. 高度便携
2. 高度可配置
3. 高度自动化

可移植性

可移植性是一个重要因素，因为除了共享我正在开发的主题/插件之外，我还希望能够共享开发环境。

我希望其他开发人员能够从 GitHub 上查看源代码并立即开始使用，包括使用 Gulp 或 Grunt 等任何工具。 这使得项目很容易进入，如果你支持更好的协作，你就有更高的机会成功。

如果您需要在另一台计算机上工作，或者您想向您的同事展示您一直在做什么，便携性也可以为您提供帮助。 能够在几分钟内在任何地方进行设置的能力对我的帮助比我想象的要多。

可配置性

配置环境的能力至关重要。 在服务器端，WordPress 非常宽容，但能够微调您的构建设置、Grunt 任务和其他选项是一个巨大的好处。

配置选项和可移植性意味着您可以在不同情况下轻松测试您的工作。 切换 PHP 版本或什至 HHVM 以确保如何？ 也许您可以检查与旧版本 WordPress 和流行插件的兼容性？ 这些是你应该能够测试的东西。

自动化

自动化是为 WordPress 工作创建开发环境的主要驱动力之一。 我不想担心我的脚本、样式表、保存我的工作、部署等等。

命令行工具构成了我的自动化套件的支柱，它可以完成从使用一个命令设置 WordPress 到打包我的产品的所有工作。

正在进行的工作

在我们深入探讨细节之前，我想我会先谈谈开发环境是如何由使用它们的人构想出来的。

如果您是命令行、构建工具、版本控制系统等领域的新手，那么我似乎是一名专业人士，他什么都知道，并且为每项任务使用完美的工具。

这与事实相去甚远！ 我精通 WordPress 的所有东西，但其他一切都只是我附加的或需要/想要学习让我的生活更快的一些额外内容。 我复制了其他人，自己找出了一些东西，并根据需要修改了一些东西（有时失败得很惨！）。

我的开发环境（和许多其他环境）混合了以下内容：

• 丰富的个人知识
• 其他人的好建议
• 我发现一些随机的东西有效
• 可以做得更好但我懒得弄清楚的步骤

换句话说：它并不完美，但它可以完成工作。 有很多改进的空间和使用其他工具的地方，您可能更喜欢这些工具。 如果您知道更多有用的工具或工作流程，请随时使用它们并在评论中告诉我！

本地服务器

WordPress 运行在 PHP 上，这是一种服务器端编码语言，因此我们需要一台服务器来运行 WordPress。 最受欢迎的选项是：

• 流浪汉
• WAMP
• XAMPP
• MAMP

多年前，我开始使用 XAMPP。 然后，当我成为 Mac 用户时，我转向了 MAMP，然后在大约两年前最终切换到 Vagrant。 网络和使用的工具一直在发展，现在我也倾向于使用 Vagrant 和 MAMP。 我将在下面解释原因。

放大器

MAMP、XAMPP 和 WAMP 中的“AMP”代表 Apache、MySQL 和 PHP。 这些工具都安装服务和 GUI 来帮助您管理服务器使用的进程。 您下载并安装应用程序，按下“开启”按钮，一切都会按预期工作。

优点：
它快速、简单、直观，并且始终适用于所有系统。 它有一个很棒的用户界面，您可以使用它来调整 PHP 设置、切换到 Nginx、配置 Memcached、Postfix、设置虚拟服务器等等。

缺点：
虽然您可以调整很多东西，但控制是有限的。 您无法更改操作系统或进行完全 SSH 访问允许您进行的其他更改。

出于同样的原因，所有 AMP 都失去了可移植性。 它们很受欢迎，任何人都可以安装它们，但它们不像 Vagrant 配置那样独立且极简。

流浪汉

流浪者有点不同。 它不是为您预先包装和环境，而是让您完全控制。 它建立在 VirtualBox（或其他 VM 应用程序）之上，允许您抓取一个“盒子”，它本质上是一个操作系统。 然后，您可以使用脚本自己配置这些。

优点：
配置自包含在两个非常小的文件中。 如果您习惯使用命令行设置环境，可以像vagrant up一样简单——该系统非常便携。

您可以根据自己的喜好对其进行配置。 任何操作系统，任何软件，从不同的缓存方法到编译自己的 PHP。 您可以完全复制实际主机的环境，以确保您的站点在本地计算机上以完全相同的方式运行。

缺点：
如果你不熟悉命令行使用，Vagrant 的学习曲线可能会很陡峭。 当一切顺利时，您需要做的就是发出一个命令。 如果有什么东西不管用，无论出于什么原因，你都会发现自己陷入了困境。

存在创建虚拟主机和执行其他常见任务的工具，MAMP 的 UI 更方便，至少对我来说是这样。 如果我需要一个带有 WP 的快速新虚拟主机来安装，我可以使用 MAMP + WP-CLI 比使用 Vagrant + WP-CLI 快得多。

使用哪一个？

如果您只使用 WordPress，则 MAMP 之类的工具可以提供足够的灵活性和功能。 当然，它允许您使用非 WordPress 网站，因此，如果您有一份不属于 WP 领域的零工，MAMP 仍然可以很好地为您服务。

如果你在非 WP 项目上与大型团队合作，我建议你选择 Vagrant 并试一试。 它将教你很多关于服务器如何在内部工作的知识，并允许你准确地共享环境。

我的偏好是两者都用。 当我需要（或有时间）时，我可以使用 Vagrant 将我的环境配置到最后一个细节。 当我需要一些简单的东西或 WordPress 项目时，MAMP 是我的首选。

WPMU DEV 的另一位作家 Rachel McCollin 写了一篇关于如何设置 MAMP 的精彩指南，我贡献了一份使用 Vagrant 进行 WordPress 开发的指南，您可以使用它来设置这些环境。

命令行工具

我不使用大量的 CLI 工具，但我使用的工具是我工作流程的很大一部分。 最突出的是 WP-CLI、Gulp、ngrok 和 Ultrahook，让我们详细介绍一下。

命令行界面

WP-CLI 是一个非常强大的命令行工具，它可以让你自动化关于 WordPress 的一切。 我已经写了一篇关于使用 WP-CLI 进行高级 WordPress 开发的教程，所以我将向您展示它的一些魔力。

设置新站点

您可以通过几个简单的命令（例如wp core download和wp core config ）下载、配置和安装 WordPress。 文档丰富且易于理解。

我使用 WP-CLI 和 bash 脚本来创建用于创建新站点的小模板。 您可以使用命令删除默认插件和主题，并下载和激活您经常使用的插件。

搜索和替换

有时需要数据库搜索和替换，但可能会很痛苦。 更改为 https、迁移到新域、重命名 url 和其他都可以带来一些大规模的变化。

由于数据库包含许多序列化数组，因此您不能只对 SQL 进行搜索和替换（除非新旧值的长度相同）。 wp search-replace oldval newvalue将为您解决所有问题，反序列化然后重新序列化您的数组。

远程管理

WP-CLI 具有内置的 SSH 来帮助您通过 SSH 管理站点。 这有可能允许您使用单个命令管理数百个站点（即：跨多个站点更新主题或插件）。

这么多…

使用 WP-CLI 可以做的事情几乎没有尽头。 从大约 35 个内置命令类别（其中包含一堆子命令到第三方包），您可以轻松地自动执行任何任务。

吞咽

Gulp 是我的自动化主力。 我用它来管理我的脚本、样式、图像，甚至是移动测试和浏览器刷新机制。 我写了一篇关于在 WordPress 中使用 Gulp 的详细文章，请查看那里的详细说明。

由于语法差异，我更喜欢 Gulp 而不是另一个流行的选择 - Grunt。 看看我的 Grunt For WordPress Development 文章，然后自己决定吧！

由于社区驱动的扩展，Gulp 使用 Node 和 Node 包来实现其功能，使其非常便携和强大。 我在 Gulp 的工作流程通常包括以下内容：

1. 找到适合我需要的扩展程序
2. 使用 npm 安装节点包
3. 需要 Gulpfile 中的包
4. 编写一个简短的自动化任务

唯一需要思考的部分是第四部分。 即使这样，大多数扩展都有复制粘贴示例，可能只需要稍微修改一下。

以下是我最常用的扩展：

• gulp-sass 用于将 Sass 编译为 CSS
• gulp-clean-css 用于缩小 CSS
• gulp-autoprefixer 用于自动添加供应商前缀
• gulp-include 用于连接 JS 文件
• gulp-uglify 用于压缩 JS 文件
• gulp-imagemin 用于优化图像
• Browsersync 用于创建有助于移动测试的开发服务器
• gulp-sourcemaps 用于为缩小文件创建源映射

恩格罗克

ngrok 是一个小型服务和命令行工具，我用来通过 Internet 共享我的本地工作。 ngrok 创建到本地环境的安全隧道，将您的应用程序暴露在一个特殊的 URL 上，例如http://7bbc49aa.ngrok.io 。

超钩

Ultrahook 是 ngrok 的反面。 ngrok 将您的 localhost 路由到网络，ultrahook 将网络路由到您的 localhost。 这对于测试像 Stripe 这样的第三方 API 非常有用。

您可以将 Stripe 设置为发送测试 webhook http://stripe.danielpataki.ultrahook.com ，它将安全地传递到您的本地服务器。

WordPress 插件

对于我们大多数人来说，WordPress 开发是插件和主题开发的代名词。 该存储库充满了插件，可帮助开发人员更快地创建更好的工作。 以下是我使用或经常使用的一些。

主题检查

主题创建者的必备插件。 主题检查将分析您的主题并找出不符合 WordPress 标准的原因。 它着眼于不推荐使用的代码、无关文件、不良做法、常见错误以及大量其他潜在问题。

高级自定义字段

高级自定义字段或 ACF 是我一直以来最喜欢的插件。 它允许开发人员在直观和快速的 UI 中为他们的主题和插件创建漂亮的自定义字段。 完成后，您可以完全隐藏 ACF 并将生成的 PHP 代码粘贴到您的工作中以保持字段完整。 一个执行良好且非常有用的插件！

查询监视器

查询监视器允许您从数据库访问的角度准确查看 WordPress 环境中正在发生的事情。 您可以在它们进入实时产品之前捕获潜在的缓慢或冗余查询，并优化现有查询以使您的代码更快。

Bash 脚本

Bash 脚本包含一堆命令，这些命令一个接一个地运行，可用于进一步自动化任务。 例如，使用 WP-CLI 安装 WordPress 已经很容易了。 只需要以下内容：

这些命令必须一个接一个地发出，这需要一点时间。 通过将它放在一个文件中，我们称之为install.sh ，您可以创建一个用于创建 WP 安装的模板。

将文件放在要创建安装的文件夹中，然后键入bash install.sh 。 将发出所有命令，并且在几秒钟内您将启动并运行一个站点。

通过添加参数，您可以使其更加有用。 如果您发出这样的命令： bash install.sh newsite ，您可以使用该参数填写数据库名称、URL 和站点标题。

Bash 文件对于创建最终构建（删除无关文件夹和文件、移动目录等）和其他类似任务也很有用。 它们甚至可以从 Gulp 任务中运行，这为您的工作流程提供了很大的灵活性。

杂项工具

浏览器扩展在测试网站时有很大帮助。 以下是我在工作流程中使用的一些内容。

邮差

Postman 是一个用于构建、测试和记录 API 的 chrome 扩展。 我发现每当我需要发送一个快速请求以查看 API 的工作原理时，Postman 比任何其他工具都快得多。

保存和管理请求的能力特别有用。 API 测试是我不太经常做的事情，但是当我开始做这件事时，它会占用我一天的大部分时间，使用像 Postman 这样的东西让我的生活变得更加轻松。

EditThisCookie

EditThisCookie 是 Chrome 扩展程序的另一个示例，我不经常使用它，但是当我使用它时，它可以为我节省数小时的时间。 它使您可以查看/清除/编辑单个站点的 cookie。 仅此而已，但是哦，天哪，它可以多么方便！

页面加载时间

页面加载时间会按照您的想法进行，它会分析页面加载。 它可以进入重要的细节，如 DNS/请求和响应时间，但我喜欢的是它在工具栏中显示整体加载时间。 超级方便快速比较。

JSON 格式化程序

我在杂项工具类别中的最后一个浏览器扩展条目是 JSON Formatter，它可以检测响应何时只是一个 JSON 字符串，并将其格式化，而不是仅仅弹出一个文本块。

弗朗茨

这个其实和发展一点关系都没有！ Franz 是一种可以在一个屋檐下聚合多个 Web 服务的工具。 我的 Messenger、Slack、Skype、Inbox by Gmail、Trello、Google 日历和 Todoist 应用程序都在一个窗口中运行，而不是它们的本地应用程序。

这一切看起来就像我在他们通常的环境中运行它们一样，但我不需要拥有所有这些图标，我可以更轻松地在它们之间切换。 我提到弗朗茨是因为它帮助我更加专注，同时也更好地沟通。

VVV

Varying Vagrant Vagrants 或简称 VVV 是一种开源 Vagrant 配置，用于为 WordPress 和 WordPress 本身开发。 它包含您入门所需的所有工具，包括 WordPress 的开发版本。

这么多！

有很多工具我没有提到，主要是因为我根本不使用它们。 它们是很棒的工具，但我只是没有使用它们，不需要它们，或者它们不适合我的工作流程。 以下是您应该看看的一些伟大的候选名单：

• 由 WordPress 主题部门制作的出色主题样板的下划线
• 整个 WordPress 堆栈的根源，包括服务器、应用程序管理和入门主题。 我觉得这对我的口味来说太复杂了，但它可能是你的拿手好戏。
• WordPress Plugin Boilerplate 用于标准化的面向对象的插件开发。

让您的开发环境成为您自己的

总之，这些是我使用的工具——它们不一定最适合你，也不一定最适合每种情况。 此设置对我的需求足够灵活，因此请务必花时间研究选项并创建适合您的工作流程。

祝你好运！

• 发展