错误的 CSS 路径 - Grunt 的实时重新加载问题

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

我的样式表加载如下：

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

每当我更改 css 文件时，我都会在浏览器中收到此 url 的 404 错误

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

这当然是正确的，因为 css 文件位于：

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

如何实时重新加载以获得正确的 URL？

你必须设置底座，以便Grunt知道从哪里运行应用程序。应设置任务输出的文件以反映结构Wordpress期望。一切都在路径配置中。

您可以实现更灵活的path如果您在 Grunt 的配置中尽早配置它，则可以使用该结构。假设Gruntfile.js位于您网站的根目录中（除了wp-content目录），您可以进行以下配置：

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

然后在watch任务，您设置：

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

所结果的Gruntfile.js看起来像：

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

您仍然需要调整上述内容以满足您的需要，但原则是存在的。