Перезагрузка BrowserSync не работает (сайт wordpress)

У меня проблемы с работой перезагрузки в режиме реального времени в BrowserSync. У меня есть сайт WordPress, если это имеет значение. Все, кроме живой перезагрузки/инъекции, кажется, работает как надо. У меня есть настройка Gulp для этого, которая выглядит так:

var gulp = require('gulp');
    var jshint = require('gulp-jshint');
    var concat = require('gulp-concat');
    var rename = require('gulp-rename');
    var uglify = require('gulp-uglify');
    var sass = require('gulp-sass');
    var autoprefixer = require('gulp-autoprefixer');
    var minifyCSS = require('gulp-minify-css');
    var del = require('del');
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;

// ==== CONFIGURATION ==== //
// Project paths
var src         = 'assets/',
    dist        = 'dist/',
    bower       = src + 'bower_components/',
    css         = dist + 'css/',
    js          = dist + 'js/'
;


// Lint and minify our Javascript files
gulp.task('js-linting-compiling', ['clean'], function(){

    // read all of the files that are in script/lib with a .js extension
    return gulp.src('assets/js/*.js')
        // run their contents through jshint
        .pipe(jshint())
        // report any findings from jshint
        .pipe(jshint.reporter('default'))
        // concatenate all of the file contents into a file titled 'all.js'
        .pipe(concat('all.js'))
        // write that file to the dist/js directory
        .pipe(gulp.dest(js))
        // now rename the file in memory to 'all.min.js'
        .pipe(rename('all.min.js'))
        // run uglify (for minification) on 'all.min.js'
        .pipe(uglify())
        // write all.min.js to the dist/js file
        .pipe(gulp.dest(js));
});


// Compile SASS into CSS, autoprefix it and minify it
gulp.task('sass-to-css', ['clean'], function () {
    gulp.src('assets/sass/**/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(css))
        .pipe(rename({ suffix: '_min' }))
        .pipe(minifyCSS({keepSpecialComments:0}))
        .pipe(gulp.dest(css))
        .pipe(reload({stream: true}));
});


// Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
  del([
    // here we use a globbing pattern to match everything inside the `dist` folder
    'dist/**',
  ], cb);
});


// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['clean', 'sass-to-css', 'js-linting-compiling'], function() {
});


// ### Gulp
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
gulp.task('default', ['clean'], function() {
  gulp.start('build');
});


// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. Specify the hostname of your dev server at
// `manifest.config.devUrl`. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
  browserSync({
    proxy: "local.project.dev",
    host: "localhost",
    notify: false,
  });
  gulp.watch(['assets/sass/**/*'], ['sass-to-css']);
  gulp.watch(['assets/js/**/*'], ['js-linting-compiling']);
  gulp.watch('**/*.php', function() {
    browserSync.reload();
  });
});

Вот что показывает терминал при обновлении файла *.scss (работает gulp watch).

[13] → gulp watch
[11:39:17] Using gulpfile ~/sites/VVV/www/local.project.dev/htdocs/app/themes/mytheme/gulpfile.js
[11:39:17] Starting 'watch'...
[11:39:19] Finished 'watch' after 1.4 s
[BS] Proxying: http://local.project.dev
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.111:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.111:3001
 --------------------------------------
[11:40:10] Starting 'clean'...
[11:40:10] Finished 'clean' after 6.12 ms
[11:40:10] Starting 'sass-to-css'...
[11:40:10] Finished 'sass-to-css' after 6.54 ms
[BS] 1 file changed (style_min.css)

Любые идеи?


person Johan Dahl    schedule 26.02.2015    source источник
comment
Какой URL вы смотрите?   -  person Heikki    schedule 26.02.2015
comment
Запуск команды gulp watch автоматически открывает мой проект wordpress по адресу: localhost:3000. Таким образом, мое собственное доменное имя не отображается, хотя страница и по этому адресу работает как надо. Это не ожидаемое поведение или BrowserSync должен работать с моим пользовательским адресом?   -  person Johan Dahl    schedule 26.02.2015
comment
Живая перезагрузка должна работать по этому открытому адресу.   -  person Heikki    schedule 26.02.2015
comment
Должен ли я видеть какие-то указания на это в терминале?   -  person Johan Dahl    schedule 26.02.2015
comment
Нет, но если вы включите notify, вы увидите уведомление в браузере.   -  person Heikki    schedule 26.02.2015
comment
Используете ли вы минимизированные или не минимизированные файлы css на своей странице?   -  person Heikki    schedule 26.02.2015


Ответы (1)


Вы говорите браузеру-синхронизации перезагружать только вашу уменьшенную версию css. Вероятно, вы используете неминифицированную версию на своей странице, и это вызывает проблему.

Так что либо перезагрузите только не минифицированный:

.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({ suffix: '_min' }))
.pipe(minifyCSS({keepSpecialComments:0}))
.pipe(gulp.dest(css));

или оба:

.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({ suffix: '_min' }))
.pipe(minifyCSS({keepSpecialComments:0}))
.pipe(gulp.dest(css))
.pipe(reload({stream: true}));

.. или используйте уменьшенную версию на странице.

person Heikki    schedule 26.02.2015