Question

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

我的sylesheet加载如下：

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

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

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

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

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

如何获取实时重新加载以获取正确的网址？

Answer 1

您必须设置基数，以便Grunt知道从哪里运行应用程序。应该设置任务输出的文件以反映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']);
};

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

Answer 2

我没有设置我可以测试它，但我认为你需要设置基本选项：

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

请参阅此处的文档：https://github.com/gruntjs/grunt-contrib-connect/blob/master/README.md#basic-use

如果相关，请通读多个服务器。

错误的CSS路径 - 与Grunt的Live Reload问题

2 个答案: