Wrong CSS Path – Live Reload issue with Grunt

I have this setup in my Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        less: {
            development: {
                options: {
                    compress: false,
                    yuicompress: false,
                    optimization: 0
                },
                files: {
                    // target.css file: source.less file
                    "assets/css/main.css": "assets/css/main.less"
                },
            } 
        },
        watch: {

            styles: {
                // Which files to watch (all .less files recursively in the less directory)
                files: ['assets/css/*.less', 'assets/less/*.less'],
                tasks: ['less'],
            },
            // Live reload CSS
            css: {
                files: ['assets/css/*.css'],
                options: {
                    nospawn: true,
                    interrupt: false,
                    livereload: true,
                },
            },
        },
    });
    // Watch
    grunt.loadNpmTasks('grunt-contrib-watch');
    // Less Complile
    grunt.loadNpmTasks('grunt-contrib-less');

    grunt.registerTask('default', ['less','watch']);
};

My sylesheet is loaded like this:

<link rel="stylesheet" href="http://project.dev/wp-content/themes/project/style.css" rel="nofollow noreferrer noopener">

Whenever I change the css file the I get a 404 error in the browser for this url

http://project.dev/assets/css/main.css?livereload=1392748371895

Which is of course right because the css file lives in:

http://project.dev/wp-content/themes/project/assets/css/main.css

How do I get live reload to get the right URL?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You have to set the base so that Grunt knows where to run the application from. The files the tasks output should be set to reflect the structure WordPress expects. Its all in the path configuration.

You can achieve a more flexible path structure if you configure it early on Grunt’s configuration. Assuming that the Gruntfile.js is in the root of your site (besides the wp-content directory), you could do the following configuration:

grunt.initConfig({
    // configurable paths
    cfg: {
        dist: './wp-content/themes/project'
    },
    // tasks configurations come here...
});

Then on the watch task, you’d set:

livereload: {
    files: ['<%= cfg.dist %>/assets/css/*.css'],
    options: {
        nospawn: true,
        interrupt: false,
        livereload: true
    }
}

The resulting Gruntfile.js would look like:

module.exports = function(grunt) {

    grunt.initConfig({
        // configurable paths
        cfg: {
            dist: './wp-content/themes/project'
        },
        less: {
            development: {
                options: {
                    compress: false,
                    yuicompress: false,
                    optimization: 0
                },
                files: {
                    '<%= cfg.dist %>/assets/css/main.css': '<%= cfg.dist %>/assets/css/main.less'
                }
            } 
        },
        watch: {
            styles: {
                files: ['<%= cfg.dist %>/assets/css/*.less', '<%= cfg.dist %>/assets/less/*.less'],
                tasks: ['less']
            },
            css: {
                files: ['<%= cfg.dist %>/assets/css/*.css'],
                options: {
                    nospawn: true,
                    interrupt: false,
                    livereload: true
                }
            }
        }
    });

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

    grunt.registerTask('default', ['less','watch']);
};

You’d still have to adjust the above to fit your needs, but the principle is there.

Solution 2

I don’t have a setup I can test this on, but I think you need to set the base option:

// Project configuration.
grunt.initConfig({
  connect: {
    server: {
      options: {
        base: 'www-root'
      }
    }
  }
});

See doc here: https://github.com/gruntjs/grunt-contrib-connect/blob/master/README.md#basic-use

Read down through multiple servers if relevant.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply