Grunt, .less, and Live Reload - Can't get them working

Question

Good afternoon,

I am having a devil of a time getting my front-end flow working. I have grunt CLI working, along with theme.js setup properly (see images below). Still, when I make changes within my {themeDir}web/css/source/_theme.less I do not see the changes. The only time I can see the change is after running a grunt clear command, and the manually reloading the page.

It seems like the change only gets moved to pub/static after that folder is cleaned, and the contents are reloaded. In other words, this is exactly what grunt should be doing for me, from what I understand.

I have been stuck on this for days.

I am able to get the following from grunt exec:{themeName} & grunt less:{themeName}:

Answer 1

Thank you both for your replies! The problem was in my theme.js file - the file grunt-config.json points to. Here is the contents of grunt-config.json:

{
"themes": "dev/tools/grunt/configs/local-themes/themes"
}

In theme.js, I didn't put both website locations in as different items. To be clear, I am in Canada, so my store has an en_US, and en_CA. So for example, I only had one of these, when I really needed both, as shown below:

porto: {
area: 'frontend',
name: 'Smartwave/porto',
locale: 'en_US',
files: [
    'css/styles-m',
    'css/styles-l'
],
dsl: 'less'
},
porto: {
area: 'frontend',
name: 'Smartwave/porto',
locale: 'en_CA',
files: [
    'css/styles-m',
    'css/styles-l'
],
dsl: 'less'
},

This explains why I could see the grunt commands working and compiling, but I saw no changes. The css files being produced were being placed in the pub/static folder for the country that isn't my current view.

Another thread I found suggested changing location in core_config_data in the database. I did that but it didn't work for me. The solution above worked.

Answer 2

Try this

grunt --force clean:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma --theme=Smartwave/porto

grunt exec:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma --theme=Smartwave/porto

grunt less:porto && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Smartwave/porto

grunt watch

But Make Sure Define Less Function in /dev/tools/grunt/configs/themes.js

porto: {
    area: 'frontend',
    name: 'Smartwave/porto',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},

Answer 3

First install live reload extension in chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

Run below command one by one

grunt exec:themename

grunt less:themename

grunt watch

Then click on live reload button right top corner in chrome. please review attached screenshots

Answer 4

What are you using for your web server dev environment? One important (and fairly undocumented) detail of LiveReload is that the browser extension tries to connect to 127.0.0.1:35729. When you run grunt watch it starts listening on that port, but a couple things may prevent the connection from working:

• missing the livereload module
• your web server isn't listening on 127.0.0.1
• port is not open (e.g. into Vagrant vm)

These have different solutions, missing the livereload is the simplest to correct, just run npm install -g livereload in your dev environment.

In the case you are not connecting to localhost/127.0.0.1 then you'll need to look at the RemoteLiveReload Chrome extension instead as it tries to connect to the same hostname that is loading the current page - https://github.com/bigwave/livereload-extensions . Don't know if there are options for other browsers.

If the web port is not open, it depends on your particular development environment. For my Vagrant setup, I had to add a forwarded_port line:

config.vm.network :forwarded_port, guest: 35729, host: 35729

You can test that the port is open and listening by starting grunt watch (when livereload node module is installed this also starts the livereload server). Then connect to <hostname>:35729 and when it's working you'll see some json output:

{"tinylr":"Welcome","version":"0.2.1"}

Overall this is a fairly opaque process with several moving parts, good luck!