2

I am currently in the middle of setting up a front end workflow for Magento 2, however I am currently unable to get livereload to work. Everything I have read so far on various tutorials and the Magento dev docs seems to imply that by running "grunt watch" in the root, livereload is automatically fired, however this doesn't seem to be working for me.

Note that I have the Livereload extension installed in my browser (Chrome), and it works fine, as I already use it quite a bit for other non-Magento builds. Anything I missed?

For reference, I am using the sample Gruntfile that ships with Magento 2, and have made no changes.

I should also point out that Grunt works perfectly fine apart from the Livereload side of things, and I am able to execute the various grunt commands to compile Magento LESS files with no problem, again other than the browser refresh/Livereload issue above.

  • are you checking with localhost or server? – Sunil Patel Feb 28 '18 at 10:48
  • I didn't have exactly the same problem as you or the same errors but you can collect some informations from my post, maybe it will help you. magento.stackexchange.com/a/219573/48355 – PЯINCƏ Mar 23 '18 at 12:12
1

I use GULP JS as a task runner and the gulp-connect node module.

My understanding is you need to run a server to communicate the reload to the browser and the server is for sale on AppStore but gulp-connect is free.

I also think Gulp is more powerful and configurable than Grunt. Just My Opinion.

I convert LESS to CSS and then move the files and reload my browser. Here is my gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var debug = require('gulp-debug');
var path = require('path');
var connect = require('gulp-connect');


gulp.task('less', function() {
  return gulp.src('../../../www/skin/frontend/*****/default/less/**')
    .pipe(plumber())
    .pipe(debug({title: "Files"}))
    .pipe(less({
      paths: ['./']
    }))
    .pipe(gulp.dest('../../../www/skin/frontend/*****/default/css/'))
    .pipe(connect.reload());
});

// Start the LiveReload Server to communicate Browser Reloads
gulp.task('connect', function() {
  connect.server({
    livereload: true
  });
});

// Task to watch the final
gulp.task('watch', function() {
  gulp.watch('../../../www/skin/frontend/*****/default/less/**', ['less']);
});

// Start Watch and Connect on
gulp.task('default', ['watch', 'connect']);
0
  1. Firstly check if you've installed Node.js & Grunt in your machine.

Go to your Magento 2 installed directory.

Execute following command in your terminal or cmd.

npm install -g grunt-cli

Rename package.json.sample to package.json.

Then execute following command.

npm install
  1. Make sure your dev/tools/grunt/configs/themes.js has proper configuration.

Rename Gruntfile.js.sample to Gruntfile.js.

Then run following commands.

grunt clean

grunt exec:<grunt theme name>

grunt less:<grunt theme name>

For example

grunt clean

grunt exec:luma

grunt less:luma

Then afterwards

grunt watch
  • Apologies, I neglected to mention that I have already done all of the above, and Grunt is otherwise working perfectly fine, other than the Livereload part. My question has been updated accordingly. – wickywills Jul 12 '16 at 16:31
  • @wickywills: Yes Gulp is better option then Grunt – Kaushal Suthar Jul 13 '16 at 6:21
0

I came across this issue recently and it was down to the themes.js configuration file for grunt, the locale parameter was not matching up to admin configuration. Like you said everything was compiling but I had to manually refresh the page to see the results.

To fix it please make sure the locale param matches up to what your using for your theme.

You can quickly see what your using by viewing the page source:

... /frontend/Vendor/Theme/en_GB/css/styles-m.css

Mine says en_GB but in my configuration file I had en_US. I then updated it so it matches up:

themename: {
    area: 'frontend',
    name: 'Vendor/theme',
    locale: 'en_GB',
    files: ['css/styles-m', 'css/styles-l'],
    dsl: 'less'
}

It now live reloads as expected and source maps are working too.

Hope this helps!

0

Ran into the same issue and in the end figured I've not had livereload node module installed (and yes I ran npm install like a few times) so installing livereload module through given below command fixed the issue:

npm install -g livereload

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.