javascript - Integrating Grunt/Gulp and Livereload to existing Apache server serving PHP/Zend

Question

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?

Answer 1

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.

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.

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. 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.

2. 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>
   

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

3. 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.