У меня есть следующие настройки в моем проекте:
├── 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
.Постепенно я чувствую, что это скорее ошибка, чем проблема конфигурации с моей стороны.: /