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

Question

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

Мне удалось заставить его работать с 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']); 

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

Answer 1

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

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

Answer 2

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

.pipe(browserSync.stream()) 

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

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

Это работает для меня. Я не знаю, есть ли что-то особенное о browserSync.reload. Как насчет попробовать. :)

Answer 3

Мое положение немного другое, но оно может быть достаточно похожим, чтобы быть полезным для вас или для кого-то еще. Я глотком + 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> 

Answer 4

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

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

gulp.watch(['scripts/**/*.js','!scripts/main.min.js'], gulp.series(buildScripts, reload));