错误的CSSpath – 与Grunt Live Reload问题

我在我的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文件，我得到这个URL的浏览器中的404错误

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

这当然是正确的，因为CSS文件居住在：

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

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

Answer 1

您必须设置基地，以便Grunt知道从哪里运行应用程序。 任务输出的文件应设置为反映WordPress期望的结构。 其全部在pathconfiguration中。

如果您在Grunt的configuration中尽早configuration，则可以实现更灵活的path结构。 假设Gruntfile.js位于您的站点的根目录（除wp-content目录之外） ，您可以执行以下configuration：

 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

我没有设置我可以testing这个，但我认为你需要设置基本选项：

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

在这里看到文档： https ： //github.com/gruntjs/grunt-contrib-connect/blob/master/README.md#basic-use

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