错误的CSS路径 - 与Grunt的Live Reload问题 [英] Wrong CSS Path - Live Reload issue with Grunt

问题描述

我在Gruntfile.js中设置了这个设置

  module.exports = function（grunt）{
 grunt .initConfig（{
 less：{
 development：{
 options：{
 compress：false，
 yuicompress：false，
 optimization：0 
 $，b $ b文件：{
 // target.css文件：source.less文件
assets / css / main.css：assets / css / main.less
}，
} 
}，
观看：{
 
样式：{
 //要观看哪些文件（所有.less文件递归地在下面的目录中）
文件：['assets / css / *。less'，'assets / less / *。less']，
 tasks：['less']，
} ，
 //实时重新加载CSS 
 css：{
 files：['assets / css / *。css']，
选项：{
 nospawn：true，
中断：false，
 livereload：true，
}，
}，
}，
}）; 
 //观看
 grunt.loadNpmTasks（'grunt-contrib-watch'）; 
 //少Complile 
 grunt.loadNpmTasks（'grunt-contrib-less'）; 
 
 grunt.registerTask（'default'，['less'，'watch']）; 
}; 
  

我的sylesheet是这样加载的：

 < link rel =stylesheethref =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 所期望的。它的全部都在路径配置中。
 
 
 
如果您在Grunt的早期配置它，您可以实现更灵活的路径组态。 假设 Gruntfile.js 位于您网站的根目录（除了 wp-content 目录之外） ，您可以进行以下配置： 
 
 
  grunt.initConfig（{
 //可配置路径
 cfg：{
 dist：'./wp-content/themes/project'
}，
 //任务配置来这里... 
}）; 
  
然后在手表任务中， d set： 
 
 
  livereload：{
 files：['<％= cfg.dist％> / assets /css/*.css']，
选项：{
 nospawn：true，
 interrupt：false，
 livereload：true 
} 
} 
  
结果 Gruntfile.js 看起来像这样：  
 
 
  module.exports = function（grunt）{
 
 grunt.initConfig（{
 //可配置路径
 cfg：{
 dist：'./wp-content/themes/project'
}，
 less：{
 development：{
选项：{
 compress：false，
 yuicompress：false，
优化：0 
}，
文件：{
'<％= cfg.dist％> /assets/css/main.css'：'<％= cfg.dist％> / ass ets / 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']）; 
}; 
  
您仍然需要调整以上以适应您的需求，但原则在那里。 / p> 
I have this setup in my 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']);
};
My sylesheet is loaded like this:
<link rel="stylesheet" href="http://project.dev/wp-content/themes/project/style.css">
Whenever I change the css file the I get a 404 error in the browser for this url
http://project.dev/assets/css/main.css?livereload=1392748371895
Which is of course right because the css file lives in:
http://project.dev/wp-content/themes/project/assets/css/main.css
How do I get live reload to get the right URL? 
解决方案
You have to set the base so that Grunt knows where to run the application from. The files the tasks output should be set to reflect the structure Wordpress expects. Its all in the path configuration.

You can achieve a more flexible path structure if you configure it early on Grunt's configuration. Assuming that the Gruntfile.js is in the root of your site (besides the wp-content directory), you could do the following configuration:
grunt.initConfig({
    // configurable paths
    cfg: {
        dist: './wp-content/themes/project'
    },
    // tasks configurations come here...
});
Then on the watch task, you'd set:
livereload: {
    files: ['<%= cfg.dist %>/assets/css/*.css'],
    options: {
        nospawn: true,
        interrupt: false,
        livereload: true
    }
}
The resulting Gruntfile.js would look like:
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']);
};
You'd still have to adjust the above to fit your needs, but the principle is there.

                        
这篇关于错误的CSS路径 - 与Grunt的Live Reload问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！