CODEWITHSUNDEEP
gruntjsgrunt-contrib-watch
edt
edt

Reputation: 22410

How to get grunt-watch to livereload the correct css file?

My goal is to use grunt-watch to live reload my stylesheet whenever I save a change to the stylesheet.

My grunt file is below.

When I run grunt, the file is being watched as expected, but the correct css file is not reloaded.

I can see in the Chrome dev tools | "network" tab that some style sheets are being live-reloaded.

But, some style sheets are not being live-reloaded, including the one that I am making changes to.

What am I doing wrong? Is there an error in my "files" option value?

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
     watch: {
            css: {
                files: '**/*.css',
                options: {
                    livereload: true
                }
            }
        }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');

};

Upvotes: 4

Views: 843

Answers (3)

edt
edt

Reputation: 22410

I figured it out.

The issue was a typo in the style sheet's 'link' tag.

The "rel" attribute had the S's uppercase, but they should be lower case.

Incorrect:

  • <link rel="StyleSheet" ...

Correct:

  • <link rel="stylesheet" ...

The style sheet works fine on the live site (site displays properly), but was not being live-reloaded by the script used by grunt-contrib-watch.

Once I corrected the typo, the style sheets started to live-reload as expected.

Upvotes: 1

Adam Simpson
Adam Simpson

Reputation: 3681

Are you using the Chrome LiveReload extension?

Also make sure you are using the right ports and nothing is conflicting. LiveReload runs by default on port 35729, you can pass a different port if you wish via the Gruntfile watch task.

Upvotes: 0

mishik
mishik

Reputation: 10003

While this might not be an actual "solution" of the Grunt config issue itself (whether it's grunt internal issue or config issue). I could still suggest using a CSS Reload plugin for this task.

You can then either use keyboard shortcut (F9 by default) or an option in context menu to reload all CSS files without reloading whole page:

enter image description here

This is, of course, not as elegant as having Grunt to do all the dirty work, but is a bulletproof solution.

Upvotes: 0

Related Questions