我的端口 10080 上的 Browsersync

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']);

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

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

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