Wrong CSS Path - Live Reload issue with Grunt

gruntjs, less, livereload, node.js

Solution

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.

Problem

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"> ``` 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?

Original source