将 Grunt/Gulp 和 Livereload 集成到服务 PHP/Zend 的现有 Apache 服务器

2022-01-12 00:00:00 php javascript apache gruntjs gulp

我正在使用 Zend 框架开发一个 PHP 项目,该框架使用 Apache 在本地提供服务.是否有适用于 Grunt/Gulp 的插件/配置允许我使用现有服务器并在我的 phtml/php、CSS 和 JavaScript 文件发生更改时重新加载我的浏览器?

I'm working on a PHP project using the Zend framework which is being served locally using Apache. Is there a plug-in/configuration for Grunt/Gulp that will allow me to use this existing server and reload my browser whenever changes are made to my phtml/php, CSS, and JavaScript files?

推荐答案

普通的 live-reload 插件可以正常工作.它通过运行一个单独的服务器来工作,该服务器只报告更改——它不直接为您的代码提供服务.

The normal live-reload plugins will work just fine. It works by running a separate server that simply reports changes — it doesn't serve your code directly.

如果您使用 gulp,请按照 gulp-livereload 自述文件中的 说明 用于设置和运行 LR 服务器.该插件会通知 LR 服务器文件已更改,LR 服务器会通知您的浏览器发生更改.

If you are using gulp, you follow the directions in the gulp-livereload README for setting up and running the LR server. The plugin will notify the LR server that a file has changed, and the LR server will notify your browser that the change has occurred.

您可以轻松地将监视添加到提供给浏览器的任何文件中,并将它们通知 LR 服务器——即使它们没有被 gulp(或 grunt)处理.

You can easily add watches onto any file served up to the browser, and notify the LR server of them — even if they aren't processed by gulp (or grunt) otherwise.

您有三种选择在浏览器中触发更改通知.

You have three choices for triggering the change notification within the browser.

  1. 如果你有单独的开发和生产版本(我希望你这样做),那么使用 gulp-embedlr 插件 将脚本标签注入到您的 HTML 或 PHP 文件中.

  1. If you have separate development and production builds (and I would hope you do), then use the gulp-embedlr plugin to inject a script tag into your HTML or PHP file.

如果你不能让它与你的 PHP 设置一起工作,那么你可以使用 PHP 自己注入脚本标签,这样它只会在开发模式下运行时注入.代码可以从 embedlr 插件中获取,但看起来是这样的:

If you can't get that to work with your PHP setup, then you could inject the script tag yourself using PHP, such that it's only injected when running in dev mode. The code can be gotten from the embedlr plugin, but it looks something like this:

<script type="text/javascript">document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"></script>')</script>

显然,如有必要,您可以调整源域和端口以匹配您的 LR 设置.

Obvisouly, you can tweak the source domain and port to match your LR setup if necessary.

如果您无法做到这一点,则没有办法运行单独的开发和生产环境,或者只是不想以适用于所有浏览器(包括移动设备)的自动方式处理此问题,您可以安装 LiveReload 浏览器插件.只需在浏览器的插件/附加商店/市场/任何地方寻找它.这需要您记住每次进行开发工作时都将其打开.

If you cannot do this, don't have a way to run separate dev and production environments, or just don't want to have this handled in an automatic manner that works across all browsers (including mobile), you can install the LiveReload browser plugin. Just look for it on your browser's plugin/add-on store/marketplace/whatever. This requires you to remember to turn it on everytime you are doing development work.

相关文章