9

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?

Zeno Popovici
  • 589
  • 3
  • 15

2 Answers2

4

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.

Wallace Sidhrée
  • 11,221
  • 6
  • 47
  • 58
  • Understood. The reasoning for keeping the gruntfile.js in the theme directory and running grunt from there, was that I could keep everything neatly in the git repository (including the Gruntfilejs). within in the theme directory. Doesn't make sense to create the git repository in the root WP folder as I would need to ignore a lot of files. – Zeno Popovici Feb 27 '14 at 16:24
  • @ZenoPopovici using `.gitignore` does make sense for me, if that helps solving the project's base problem. As it is now, the `livereload` you have on your question treats the path `files: ['assets/css/*.css']` as the path for the `CSS` files, but that is not correct considering the path that exists before the theme folder... (as you already found out, hence the question). :) – Wallace Sidhrée Feb 27 '14 at 19:28
  • Just saying... my answer may not be the solution you want to implement, but it does solve the problem you're trying to solve. ;) – Wallace Sidhrée Feb 27 '14 at 19:30
  • 1
    Thanks Wallace. You're most probably right. I'll take this approach from now on, as I realized that for some projects custom plugins are necessary and therefore they too belong in git. – Zeno Popovici Feb 28 '14 at 15:09
3

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.

Matthew
  • 9,851
  • 4
  • 46
  • 77
  • Doesn't work for me. I'm not using contrib-connect. I'm using contrib-watch. – Zeno Popovici Feb 23 '14 at 21:30
  • Sorry - My miss there, is this resolved using the cwd option and setting the spawn directory? https://github.com/gruntjs/grunt-contrib-watch#optionscwd – Matthew Feb 23 '14 at 22:59
  • Thanks, but it doesn't seem to work for me. Let me give a little bit more background. I'm new to node & grunt, I'm creating a wordpress theme and my package.json and Gruntfile.js are in the /wp-content/themes/themename folder. I'm creating everything there so that I can easily manage things trough version control in the theme folder. Do I have to move the package.json and the Gruntfile.js in the wordpress root folder? I don't want to do that but right now everything I tried doesn't work. Thanks for the patience. – Zeno Popovici Feb 24 '14 at 17:09
  • 1
    It may sound biased since I've given another answer but I think the problem here is not necessarily with the `livereload` missing a base but the project itself missing a clearer configuration for the base. Personally, I would move `Grunt` files to the `Wordpress` root folder and treat it as the base - using `.gitignore` to ignore folders other than the active theme folder. Once that is done the configuration on my answer would take care of the rest. – Wallace Sidhrée Feb 27 '14 at 19:13
  • Thanks for the suggestions, Wallace just answered it better so he got the bounty. – Zeno Popovici Feb 28 '14 at 15:08