我的端口 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 应该位于 . 路径中。

**/* 表示 "search in all folders".

我的端口 10080 上的 Browsersync

Browsersync on my port 10080

xampp

wordpress

gruntjs

browser-sync