Gulp browser-sync работает только один раз

Я пробую Gulp в одном из своих проектов, и я хотел запустить его, как раньше, с часами Grunt. Это означает, что он должен смотреть меньше файлов и js-файлов, линтовать, объединять, компилировать и обновлять браузер, как только все это будет сделано.

Мне удалось заставить его работать с gulp-browser-sync, но по какой-то причине он работает только один раз. Я вношу изменения в свой файл .less, и браузер перезагружается. Затем, при втором изменении, он компилируется, но перезагрузки не происходит.

Вот журнал:

[BS] Serving files from: ./
[09:47:26] Starting 'css-clean'...
[09:47:26] Finished 'css-clean' after 16 ms
[09:47:26] Starting 'styles'...
[BS] 1 file changed (styles.min.css)
[09:47:27] Finished 'styles' after 624 ms
[09:47:27] Starting 'styles-watch'...
[BS] Reloading Browsers...

И когда я нажимаю кнопку сохранения во второй раз:

[09:47:31] Starting 'css-clean'...
[09:47:31] Finished 'css-clean' after 3.39 ms
[09:47:31] Starting 'styles'...
[BS] 1 file changed (styles.min.css)
[09:47:32] Finished 'styles' after 362 ms

Что касается JS, он работает постоянно. Никаких проблем, даже после того, как задача стилей выполнена, изменения JS по-прежнему запускают перезагрузку должным образом. На самом деле есть проблемы только со стилями.

Вот gulpfile.js

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    less = require('gulp-less'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    path = require('path'),
    streamqueue = require('streamqueue'),
    clean = require('gulp-clean'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload;


// Clean the CSS folder
gulp.task('css-clean', function () {
    return gulp.src(['dist/css'], {read: false})
        .pipe(clean());
});

// Clean the CSS folder
gulp.task('js-clean', function () {
    return gulp.src(['dist/js'], {read: false})
        .pipe(clean());
});


// Generate the CSS styles, clean before hand
gulp.task('styles', ['css-clean'], function() {
  return streamqueue({ objectMode: true },
            gulp.src(['./bower_components/uikit/less/uikit.less']),
            gulp.src(['./src/less/main.less'])
        )
    .pipe(concat('styles.less'))
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({stream:true}));
});

// create a task that ensures the `styles` task is complete before
// reloading browsers
gulp.task('styles-watch', ['styles'], browserSync.reload);



// Lint Task
gulp.task('lint', function() {
    return gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});


// Generate the scripts, clean before hand
gulp.task('scripts', ['js-clean', 'lint'], function() {
  return streamqueue({ objectMode: true },
            gulp.src(['./bower_components/jquery/dist/jquery.js']),
            gulp.src(['./bower_components/modernizer/modernizr.js']),
            gulp.src(['./bower_components/uikit/js/uikit.js']),
            gulp.src(['./src/js/plugin.js']),
            gulp.src(['./src/js/main.js'])
        )
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.reload({stream:true}));
});

// create a task that ensures the `scripts` task is complete before
// reloading browsers
gulp.task('scripts-watch', ['scripts'], browserSync.reload);


// Lint Task
gulp.task('alldone', ['scripts'], function() {
    return gulp.src('src/js/*.js')
               .pipe(notify({ message: 'Gulp tasks are completed!!' }));
});


// Static server
gulp.task('browsersync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("src/less/*.less", ['styles-watch']);
    gulp.watch('src/js/*.js', ['lint', 'scripts-watch']);
    gulp.watch("*.html").on('change', reload);
});


// Default Task
gulp.task('default', ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']);

// Build Task
gulp.task('build',   ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']);

Спасибо за вашу помощь!


person Vallieres    schedule 22.04.2015    source источник


Ответы (6)


Как насчет прямого использования

.pipe(browserSync.stream())

Однажды у меня была такая же проблема при изменении файлов .jade, которые он перезагружал только один раз. Затем я обернул browserSync.reload анонимной функцией, например

gulp.task('templates-watch', ['templates'], function() {
    browserSync.reload();
});

Меня устраивает. Я не знаю, есть ли что-то особенное в browserSync.reload. Как насчет того, чтобы попробовать. :)

person Charlie Stras    schedule 25.05.2015
comment
Анонимная функция имела все значение! +1 миллион - person Adam Lane; 16.07.2015
comment
Это потому, что функция browserSync.reload принимает аргумент. github.com/BrowserSync/browser-sync/issues/ - person dongseok0; 03.11.2015
comment
да, по какой-то причине, если вы используете его как обратный вызов напрямую, он работает только один раз! кто-то, вероятно, должен сообщить об этом в браузеры - person light24bulbs; 21.11.2017

Для меня в Gulp 4 анонимная функция не решила проблему. Я заключил browserSync.reload () в функцию с обратным вызовом done:

function reload(done) {
  browserSync.reload();
  done();
}

gulp.watch(['scripts/**/*.js','!scripts/main.min.js'], gulp.series(buildScripts, reload));
person Paul Hayes    schedule 07.07.2016
comment
Да! Это привело к множеству проб и ошибок. Спасибо - person Mitch Moccia; 23.10.2018
comment
Эту простую настройку было легко реализовать, и она отлично зарекомендовала себя. Спасибо Пол - person Gray Ayer; 21.01.2019

Я знаю, что это неправильный способ, но после некоторых проб и ошибок я понял, что с помощью неопределенной функции после browserSync.reload()

gulp.watch("./**/*.php", function () {
    browserSync.reload();
    done();
});

приводит к ошибке ссылки в моем журнале, которая запускает перезагрузку браузера:

ReferenceError: done is not defined 
    at ...
    at ...
    at asyncRunner (...)
    at processTicksAndRejections (...)
[Browsersync] Reloading Browsers...
person AJaeck    schedule 04.05.2020

Вы уверены, что CSS не изменен в браузере? Новые стили загружаются без необходимости перезагружать страницу. По крайней мере, это то, что делает моя настройка gulp.

Попробуйте изменить файл .less и посмотрите, действительно ли изменение отображается в браузере.

person Parin    schedule 22.04.2015
comment
Он не обновляется, так как мой тест меняет цвет фона навигационной панели, и я не вижу его в браузере, пока я сам не обновлю страницу во второй раз. - person Vallieres; 22.04.2015

Моя ситуация немного отличается, но она может быть достаточно похожей, чтобы быть полезной для вас или кого-то еще. У меня gulp + browserSync настроен следующим образом:

.task('serve', ['clean', 'lint', 'sass', 'js', 'server'], function () {
  return gulp.watch([paths.js, paths.html, paths.sass], 
    ['lint', 'sass', 'js', browserSync.reload]);
})

Это запустится и откроет страницу один раз. Если я внесу изменения в HTML-страницу и сохраню ее, я смогу увидеть, как выполняются lint, sass, js и browserSync.reload, но браузер не обновлялся. Мой HTML был очень простым; это:

<!doctype html>
<html>
TEST
</html>

Я наконец изменил HTML на этот, и он начал работать:

<!doctype html>
<html>
<head>
    <title>TEST</title>
</head>
<body>
HELLO-TEST
</body>
</html>
person Kip    schedule 01.07.2015

Я столкнулся с той же проблемой. Похоже, что есть проблема с функцией asyncDone внутри node_modules. вот путь к файлу: /node_modules/glob-watcher/index.js

Ниже приведен только грязный прием для временного исправления. иногда у вас могут быть проблемы. но работал у меня.

function onChange() {
  console.log("onChange running: ", running);

  /** existing code */

  // keeping this function at it worked for me.
  setTimeout(() => {
     runComplete({msg: "test"});
  }, 2000);
}
person santy    schedule 03.01.2020