BrowserSync с Gulp не перезагружает и не вносит изменения, а пользовательский интерфейс BS не показывает никакого текущего соединения - PullRequest
0 голосов
/ 06 октября 2018

У меня есть следующие настройки в моем проекте:

├── browser-sync@2.24.7 ├── gulp@3.9.1 ├── gulp-autoprefixer@6.0.0 ├── gulp-compass@2.1.0 ├── gulp-concat@2.6.1 ├── gulp-load-plugins@1.5.0 ├── gulp-plumber@1.2.0 └── gulp-uglify@3.0.1

Все работает на Node v10.11.0 и NPM 6.4.1, и мой gulp.js файл выглядит следующим образом:

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
var browserSync = require('browser-sync').create();

var devDomain = "http://mytest.test";
var themePath = "./wp-content/themes/mytest/";
var cssPath = "./wp-content/themes/mytest/css/";
var scssPath = "./wp-content/themes/mytest/scss/";
var jsPath = "./wp-content/themes/mytest/js/";
var jsPathRaw = "./wp-content/themes/mytest/js/raw/";
var mainMin = "main.min.js";
var overtureMin = "overture.min.js";

gulp.task('compass', function(){
    return gulp.src( scssPath + '*.scss' )
      .pipe(plugins.plumber())
      .pipe(plugins.compass({
         config_file: './config.rb',
         css: cssPath,
        sass: scssPath
      }))
        .pipe(plugins.autoprefixer('last 2 versions'))
        .pipe(gulp.dest(cssPath))
        .pipe(browserSync.stream());
 });

gulp.task('js-overture', function() {
   return gulp.src([
        jsPathRaw + 'vendor/matchmedia.js',
        jsPathRaw + 'vendor/picturefill.js',
        jsPathRaw + 'overture.js'
    ])
  .pipe(plugins.concat(overtureMin))
  .pipe(plugins.uglify())
  .pipe(gulp.dest(jsPath))
  .pipe(browserSync.stream());
});

gulp.task('js-main', function() {
  return gulp.src([
     jsPathRaw + 'vendor/jquery.js',
     jsPathRaw + 'vendor/enquire.js',
     jsPathRaw + 'vendor/jquery.smooth-scroll.js',
     jsPathRaw + 'main.js'
   ])
    .pipe(plugins.concat(mainMin))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(jsPath))
    .pipe(browserSync.stream());
});

gulp.task('js-watch', ['js-overture','js-main'], function (done) {
    browserSync.reload();
    done();
});

gulp.task('watch', function () {

    browserSync.init({
        browser: "firefox",
        open: 'external',
        proxy: devDomain,
        injectChanges: true
     });

    gulp.watch([scssPath + '*.scss'], ['compass']);
    gulp.watch([jsPathRaw + '*.js'], ['js-watch']);
});

gulp.task('default', ['watch']);

Компас, а также задача Javascript отлично работают без проблем.Означает, что генерируются новые файлы CSS и JS, содержащие изменения.Проблема в том, что BrowserSync не вносит изменения в CSS, и в случае изменения JS браузер также не перезагружается.

Я пробовал это с Google Chrome, а также с Firefox, как показано втекущий gulp.js файл выше.И если я перехожу к пользовательскому интерфейсу BrowserSync, в столбце текущего подключения не отображается ни одного открытого браузера.Он полностью пуст, даже BrowserSync открыл это конкретное окно браузера, когда я запустил файл gulp.js прямо перед этим.

Обновление Я обновил до BrowserSync 2.26.0, но поведение не вводить иперезагрузка все еще продолжается.Я также добавил logLevel: "debug" к инициализации BrowserSync, но при запуске gulp есть только отладочная информация, вообще нет выходных данных, когда необходимо выполнить инъекцию или перезагрузку при сохранении файлов scss или js.Постепенно я чувствую, что это скорее ошибка, чем проблема конфигурации с моей стороны.: /

...