Question

在我的gulp任务中，我使用的是browsersync，但是因为有一段时间chrome不能刷新css。我在Safari和Chrome中使用browsersync。在过去一切都很好，我没有改变gulp设置。在Safari中重新加载就像预期的那样，在Chrome中我可以看到页面重新加载，还有右上角的“连接到BrowserSync”消息。在browsersync重新加载chrome之后，没有任何事情发生。要查看更改，我必须手动«shift reload»chrome。我将chrome重置为基本设置，我发现有人说我必须在网络下的DevTools中禁用“浏览器缓存”。最后我将firefox添加到浏览器标签中，而且在firefox中一切都很好。

我有一个新的macOS Sierra（10.12.6）与所有最新的浏览器版本一起运行。

附上我的gulpfile.js

// VARIABLES
// ********************************************************

var gulp           = require('gulp'),
    browserSync    = require('browser-sync'),
    del            = require('del'),
    autoprefixer   = require('gulp-autoprefixer'),
    notify         = require('gulp-notify'),
    plumber        = require('gulp-plumber'),
    sass           = require('gulp-sass'),
    sassGlob       = require('gulp-sass-glob'),
    sourcemaps     = require('gulp-sourcemaps'),
    runSequence    = require('run-sequence');




// Functions
// ********************************************************

// Plumber Function zur Ausgabe von Fehlermeldungen
function customPlumber(errTitle) {
  return plumber({
    errorHandler: notify.onError({
      title: errTitle || "Error running Gulp",
      message: "Error: <%= error.message %>",
      sound: "Glass",
    })
  })
}




// Tasks
// ********************************************************



// Sass kompilieren ---------
gulp.task('sass', function() {
  return gulp.src('../themes/custom/my-website/sass/**/*.scss')
    .pipe(customPlumber('Error Running Sass'))
    .pipe(sourcemaps.init())
    .pipe(sassGlob())
    .pipe(sass({
      includePaths: ['bower_components'],
    }))
    .pipe(autoprefixer({
      browsers: 'last 2 versions',
    }))
    .pipe(sourcemaps.write('./sourcemap'))
    .pipe(gulp.dest('../themes/custom/my-website/css'))
    .on('end', browserSync.reload);
});


// Browser Sync (Proxy)------
gulp.task('browserSync', function() {
  browserSync({
    proxy: 'dev-my-website.selfip.net',
    browser: ['google chrome', 'safari', 'firefox'],
  });
});


// Clean --------------------
gulp.task('clean:dev', function() {
  del([
    'css'
  ]);
});


// Watch --------------------
gulp.task('watch', function() {
  gulp.watch('../themes/custom/my-website/sass/**/*.scss',['sass']);
  gulp.watch('../themes/custom/my-website/templates/**/*.twig', browserSync.reload);
});


// Default Task -------------
gulp.task('default', function(callback) {
  runSequence(
    'clean:dev',
    'sass',
    ['browserSync', 'watch'],
    callback
  )
});

Answer 1

我发现您使用的是源图，因此您的问题很可能是an SSL certificate issue。

browsersync以chrome格式重新加载页面，但不显示更改

1 个答案: