Question

我无法让Grunt的浏览器同步来更新我的更改。我没有太多使用Grunt所以我对此有点新意。也许有些人知道可能出现什么问题？

我正在使用XAMPP并运行wordpress网站： http://localhost:10080/wp_demo2/

（我使用端口10080以避免与Skype发生冲突）

这是我的gruntfile.js（已更新）

var root = './htdocs/wp_demo2/wp-content/themes/isak/';
module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        sass: {
            options: {
                style: 'expanded', 
                precision: 5 
            },
            all: {
                files: {
                    'css/output.css': 'scss/input.scss'
                }
            }
        },
        watch: {            
            files: 'scss/**/*.scss',
            tasks: ['sass']

        },
        browserSync: {
            dev: {  
                bsFiles:
                {
                    src: [root+'css/output.css', root + '**/*.php']
                },
                options: {                    
                    watchTask: true,
                    proxy: "localhost:10080/wp_demo2"
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');

    grunt.registerTask('default', ['browserSync', 'watch']);

};

Answer 1

Browsersync选项中的

files是本地路径，而不是URL。我会在path中设置端口，并将路由移动到options以外的文件。

// ...

browserSync: {
    dev: {
        bsFiles: {
            src: ['css/output.css', '**/*.php']
        },
        options: {
            watchTask: true,
            proxy: 'localhost:10080/wp_demo2'
        }
    }
}

// ...

grunt.registerTask('dev', ['sass', 'browserSync', 'watch']);

Browsersync应在output.css被修改时更新。

您的Gruntfile.js应位于.路径。

**/*表示“在所有文件夹中搜索”。

我的端口10080上的浏览器同步

1 个答案: