我的端口10080上的Browsersync

Question

我无法让Grunt的浏览器同步来更新我的更改。我没有经常使用Grunt，所以我对此有点陌生。也许你们中的一些人知道什么可能是错的？

我正在使用XAMPP并运行一个wordpress站点：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']);

当output.css被修改时，Browsersync应该更新。

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

**/*的意思是“在所有文件夹中搜索”。