Magento 2 + Livereload

Question

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.

Answer 1

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

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

Answer 2

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

Answer 3

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']);

Answer 4

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!