Gulp瀏覽器同步只能工作一次

Question

我試着在我的一個項目上咕嘟咕and，我想像我以前用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沒有在瀏覽器中更改嗎？無需重新加載頁面即可加載新樣式。至少這是我的g setup設定正在做的事情。

嘗試更改.less文件，並查看該更改是否在瀏覽器中實際可見。

Answer 2

如何直接使用

.pipe(browserSync.stream()) 

我曾經有過同樣的問題，而改變它只有一次重載「.jade」文件。然後，我裹browserSync.reload在一個匿名函數像

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

這對我的作品。我不知道是否有什麼特別的關於browserSync.reload。如何嘗試。 :)

Answer 3

我的情況有點不同，但它可能相似，足以對您或其他人有所幫助。我有這樣設置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> 

Answer 4

對我來說，在咕嘟咕嘟4，匿名函數並沒有解決這個問題，我所做的是包住browserSync.reload（）與一個做回調函數：

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

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