Browsersync无法使用MAMP

Question

我设置了带有watch任务的browsersync，以将sass合成为css，concat JS和类似的东西。 当我将其设置为服务器时，它工作正常。 但是现在我正尝试将其用作具有wordpress的本地MAMP服务器的代理，然后，一切正常，没有错误，检测到更改并重新编译了所有内容，并显示[Browsersync] Reloading Browsers...，但什么也没有。 / p>

仅相关任务：

//Watching scss/html files and serving via browsersync

gulp.task('watch', ['browserSync'], function(){
    gulp.watch('assets/scss/**/*.scss',['sass']);
    gulp.watch('assets/css/**/*.css').on('change', browserSync.reload);
    gulp.watch(dir.dev.js,['jslint']);
    gulp.watch('assets/js/app.js').on('change', browserSync.reload);
    gulp.watch('*.html').on('change', browserSync.reload);
});


//Init browsersync
gulp.task('browserSync',['dev-inject'], function(){
    browserSync.init({
        proxy: 'localhost:8888/besa',
        port: 8181
    });
});

//Lint the JS files
gulp.task('jslint', function(){
    return gulp.src(dir.dev.js)
    .pipe(jsHint())
    .pipe(jsHint.reporter('default', { verbose: true }))
});



//Compile sass into css and send to browsersync

gulp.task('sass', function(){
    return gulp.src(dir.dev.scss)
    .pipe(sassLint()) //Lint all css and break on errors
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError())
    .pipe(sourceMaps.init()) //Start generating the sourcemap
    .pipe(sass.sync().on('error', sass.logError)) //Compile synchronously
    .pipe(autoPrefixer(prefixerOptions)) //Autoprefix all css
    .pipe(sass(sassOptions)) //Compile SASS to CSS
    .pipe(sourceMaps.write())//Write the sourcemap
    .pipe(gulp.dest('assets/css')) //Export compiled css
});



//Inject dev CSS & JS

gulp.task('dev-inject', ['sass', 'jslint'], function(){
    gulp.src('header.php')
    .pipe(gulpInject(gulp.src([
        'assets/css/style.css',
        'assets/vendor/vendors-bundle.js',
        'assets/js/app.js'
        ]), {relative: true, addPrefix: dir.theme}))
    .pipe(gulp.dest('./'));
})

完整的gulpfile.js：

//Global Options

const

    themeName = 'besa';

    dir = {
        dev : {
            scss: 'assets/scss/**/*.scss',
            js: 'assets/js/**/*.js'
        },
        prod : 'dist/',
        theme : 'wp-content/themes/' + themeName,
    },

    prefixerOptions = {
        browsers: ['last 2 versions']
    },

    sassOptions = {
        outputStyle: 'expanded',
        errLogToConsole: true
    }
;

//Gulp plugins

const
      gulp          = require('gulp'),
      sass          = require('gulp-sass'),
      browserSync   = require('browser-sync').create(),
      autoPrefixer  = require('gulp-autoprefixer'),
      sourceMaps    = require('gulp-sourcemaps'),
      jsHint        = require('gulp-jshint'),
      sassLint      = require('gulp-sass-lint'),
      cssMin        = require('gulp-clean-css'),
      gulpInject    = require('gulp-inject'),
      rename        = require('gulp-rename'),
      jsMin         = require('gulp-uglify'),
      concat        = require('gulp-concat')



//Watching scss/html files and serving via browsersync

gulp.task('watch', ['browserSync'], function(){
    gulp.watch('assets/scss/**/*.scss',['sass']);
    gulp.watch('assets/css/**/*.css').on('change', browserSync.reload);
    gulp.watch(dir.dev.js,['jslint']);
    gulp.watch('assets/js/app.js').on('change', browserSync.reload);
    gulp.watch('*.html').on('change', browserSync.reload);
});

//Init browsersync
gulp.task('browserSync',['dev-inject'], function(){
    browserSync.init({
        proxy: 'localhost:8888/besa',
        port: 8181
    });
});

//Lint the JS files
gulp.task('jslint', function(){
    return gulp.src(dir.dev.js)
    .pipe(jsHint())
    .pipe(jsHint.reporter('default', { verbose: true }))
});



//Compile sass into css and send to browsersync

gulp.task('sass', function(){
    return gulp.src(dir.dev.scss)
    .pipe(sassLint()) //Lint all css and break on errors
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError())
    .pipe(sourceMaps.init()) //Start generating the sourcemap
    .pipe(sass.sync().on('error', sass.logError)) //Compile synchronously
    .pipe(autoPrefixer(prefixerOptions)) //Autoprefix all css
    .pipe(sass(sassOptions)) //Compile SASS to CSS
    .pipe(sourceMaps.write())//Write the sourcemap
    .pipe(gulp.dest('assets/css')) //Export compiled css
});



//Inject dev CSS & JS

gulp.task('dev-inject', ['sass', 'jslint'], function(){
    gulp.src('header.php')
    .pipe(gulpInject(gulp.src([
        'assets/css/style.css',
        'assets/vendor/vendors-bundle.js',
        'assets/js/app.js'
        ]), {relative: true, addPrefix: dir.theme}))
    .pipe(gulp.dest('./'));
})



//Minify CSS

gulp.task('min-css', function(){
    return gulp.src('assets/css/style.css')
    .pipe(sourceMaps.init())
    .pipe(cssMin())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(sourceMaps.write())
    .pipe(gulp.dest(dir.prod));
});



//Concat and Minify JS

gulp.task('min-js', function(){
    return gulp.src('assets/js/*.js')
    .pipe(sourceMaps.init())
    .pipe(concat('main.js'))
    .pipe(gulp.dest(dir.prod))
    .pipe(rename('main.min.js'))
    .pipe(jsMin())
    .pipe(sourceMaps.write())
    .pipe(gulp.dest(dir.prod))
});



//Build task to be run on each commit

gulp.task('build', ['min-css', 'min-js'], function(){
    var sources = gulp.src([
        'dist/style.min.css',
        'dist/main.min.js'
        ], {
            read: false
        });
    gulp.src('header.php')
    .pipe(gulpInject(
        sources, {
            relative: true,
            addPrefix: dir.theme
        })
    )
    .pipe(gulp.dest('./'));
});