9

我的 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？

4

2 回答 2

4

您必须设置基础，以便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']);
};

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

于 2014-02-26T22:33:55.093 回答
3

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

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

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

如果相关，请仔细阅读多个服务器。

于 2014-02-21T17:16:39.220 回答