Grunt with LiveReload
When you run grunt watch, you’ll still need to refresh the browser window every time you update a Less file, so the CSS updates can take effect. But there is something called LiveReload, which is a tool that does some magic.
LiveReload takes the power of grunt watch, and when it is used along with the corresponding LiveReload browser extension, it automatically reloads styles on a page without the need for a full page refresh. This can significantly boost your productivity when styling pages with LESS in Magento, and is a huge time saver.
Since we already have Grunt set up, we’ll just need the LiveReload Browser extension installed. It is available for both Chrome & Firefox.
After installing the extension, we’ll also need to make some updates to our theme. Within our theme, let’s create a file at Magento_Theme/layout/default_head_blocks.xml. This file contains any scripts or styles we’d like to add to the HTML head of the page. This will be a standard page node, that contains a head node, and we will be adding a JavaScript file to it with the script tag. Let’s add a defer attribute set to true, and set the src attribute to the location of our livereload script.
<?xml version="1.0"?>
<page xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script defer="true" src="/livereload.js?port=443" src_type="url"/>
</head>
</page>
If you use docker-magento for your development environment, you’ll set this to a special value of /livereload.js?port=443. Remember ther port=443 parameter, it’s very important!
If you don’t use docker-magento, you’ll want to add on the URL of your site along with the port LiveReload is listening on. By default, this is almost always http://yourdomain.test:35729. We’ll remove this for now, since I’m using docker-magento.
Finally, save & reload the page. If you hover over the LiveReload browser icon, it should say “LiveReload is connected.”. If you see any other error, or a 404 or 502 error in the browser console when trying to load livereload.js, it’s either because the livereload.js file is loaded at a different address, or grunt watch isn’t running. That’s another thing to note: the livereload server is automatically spanned off when grunt watch executes.