我的 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 知道从哪里运行应用程序。任务输出的文件应设置为反射(reflect) Wordpress 期望的结构。全部在路径配置中。

如果您在 Grunt 配置的早期配置它，您可以获得更灵活的 path 结构。 假设 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']);
};

您仍然需要调整以上内容以满足您的需求，但原则就在那里。

关于node.js - 错误的 CSS 路径 - Grunt 的实时重新加载问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21862846/