gulp 浏览器同步和重新加载问题

Question

我是安装和使用 gulp 的新手，我花了好几天的时间才完成这部分，但是，我从尝试和错误中学到了很多东西，但现在我遇到了障碍。

这就是我的 gulpfile.js:

// MODULES
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var browsersync = require('browser-sync');
var reload = browsersync.reload;
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var concat = require('gulp-concat');



// ERROR LOG
var onError = function (err) {
    console.log('An error occurred:', gutil.colors.magenta(err.message));
    gutil.beep();
    this.emit('end');
};


// COMPILE AND MINIFY SASS
gulp.task('sass', function () {
    return gulp.src('./wp-content/themes/pixelboutique/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./wp-content/themes/pixelboutique/css'))
    .pipe(browsersync.stream())
    done();
});


// MINIFY JS
gulp.task('js', function () {
    return gulp.src('./wp-content/themes/pixelboutique/js/*.js')
    .pipe(js())
    .on('error', onError)
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('./wp-content/themes/pixelboutique/js/min'))
    .pipe(browsersync.stream())
    done();
});


// IMAGES
gulp.task('imagemin', function () {
    return gulp.src('./wp-content/themes/pixelboutique/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./wp-content/themes/pixelboutique/images'))
    done();
});


// BROWSERSYNC
gulp.task('browser-sync', function(done) {
    browsersync.init({
        proxy: 'http://localhost/testingsite/'
    })
    done();
});

// RELOAD
gulp.task('reload', function (done) {
    browsersync.reload();
    done();
});


// WATCH
gulp.task('watch', function() {
    gulp.watch('./wp-content/themes/pixelboutique/sass/**/*.scss', gulp.series('sass', 'reload'));
    gulp.watch('./wp-content/themes/pixelboutique/js/*.js', gulp.series('js', 'reload'));
    gulp.watch('./wp-content/themes/pixelboutique/images/*', gulp.series('imagemin', 'reload'));

    gulp.watch('./wp-content/themes/pixelboutique/**/*.php').on('change', browsersync.reload);
    gulp.watch('*/pixelboutique/**/*.php').on('change', browsersync.reload);
});


gulp.task('default', gulp.series('sass', 'js', 'imagemin', 'browser-sync', 'watch'));

// MODULES
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var browsersync = require('browser-sync');
var reload = browsersync.reload;
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var concat = require('gulp-concat');



// ERROR LOG
var onError = function (err) {
    console.log('An error occurred:', gutil.colors.magenta(err.message));
    gutil.beep();
    this.emit('end');
};


// COMPILE AND MINIFY SASS
gulp.task('sass', function () {
    return gulp.src('./wp-content/themes/pixelboutique/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./wp-content/themes/pixelboutique/css'))
    // .pipe(browsersync.stream())
    done();
});


// MINIFY JS
gulp.task('js', function () {
    return gulp.src('./wp-content/themes/pixelboutique/js/*.js')
    .pipe(js())
    .on('error', onError)
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('./wp-content/themes/pixelboutique/js/min'))
    // .pipe(browsersync.stream())
    done();
});


// IMAGES
gulp.task('imagemin', function () {
    return gulp.src('./wp-content/themes/pixelboutique/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./wp-content/themes/pixelboutique/images'))
    done();
});


// BROWSERSYNC
gulp.task('browser-sync', function(done) {
    browsersync.init({
        proxy: 'http://localhost/testingsite/'
    })
    done();
});

// RELOAD
gulp.task('reload', function (done) {
    browsersync.reload()
    done();
});


// WATCH
gulp.task('watch', function() {
    gulp.watch('./wp-content/themes/pixelboutique/sass/**/*.scss', gulp.series('sass', 'reload'));
    gulp.watch('./wp-content/themes/pixelboutique/js/*.js', gulp.series('js', 'reload'));
    gulp.watch('./wp-content/themes/pixelboutique/images/*', gulp.series('imagemin', 'reload'));

    gulp.watch('./wp-content/themes/pixelboutique/**/*.php').on('change', browsersync.reload);
    gulp.watch('*/pixelboutique/**/*.php').on('change', browsersync.reload);
});


gulp.task('default', gulp.series('sass', 'js', 'imagemin', 'browser-sync', 'watch'));

这是终端的输出：

$ gulp
[12:43:31] Using gulpfile C:\xampp\htdocs\testingsite\gulpfile.js
[12:43:31] Starting 'default'...
[12:43:31] Starting 'sass'...
[12:43:31] Finished 'sass' after 300 ms
[12:43:31] Starting 'js'...
[12:43:32] Finished 'js' after 241 ms
[12:43:32] Starting 'imagemin'...
[12:43:32] gulp-imagemin: Minified 0 images
[12:43:32] Finished 'imagemin' after 11 ms
[12:43:32] Starting 'browser-sync'...
[12:43:32] Finished 'browser-sync' after 72 ms
[12:43:32] Starting 'watch'...
[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
 --------------------------------------------------
       Local: http://localhost:3000/testingsite/
    External: http://192.168.0.37:3000/testingsite/
 --------------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------------------
[12:43:40] Starting 'sass'...
[Browsersync] 2 files changed (style.css, woocommerce.css)
[12:43:40] Finished 'sass' after 266 ms
[12:43:40] Starting 'reload'...
[12:43:40] Finished 'reload' after 796 μs
[Browsersync] Reloading Browsers...
[12:43:49] Starting 'sass'...
[Browsersync] 2 files changed (style.css, woocommerce.css)
[12:43:49] Finished 'sass' after 203 ms
[12:43:49] Starting 'reload'...
[12:43:49] Finished 'reload' after 371 μs
[Browsersync] Reloading Browsers...
[12:43:51] Starting 'sass'...
[Browsersync] 2 files changed (style.css, woocommerce.css)
[12:43:51] Finished 'sass' after 206 ms
[12:43:51] Starting 'reload'...
[12:43:51] Finished 'reload' after 458 μs
[Browsersync] Reloading Browsers...
[12:44:00] Starting 'js'...
[Browsersync] 1 file changed (all.min.js)
[12:44:00] Finished 'js' after 167 ms
[12:44:00] Starting 'reload'...
[12:44:00] Finished 'reload' after 431 μs
[Browsersync] Reloading Browsers...

我的 sass、js 和 php 中的文件更改会被监视，并且浏览器会刷新，但 js 和 sass 不会注入到站点中。 php 更改已重新加载并注入成功。

Answer 1

对我来说，问题是 adsblock 扩展阻止了 browsersync 重新加载，请确保在特定页面上将其关闭。我什至不得不关闭浏览器并再次打开它以确保它完全关闭。