Gulp browser-sync funktioniert nur einmal

Question

Ich probiere Gulp auf einem meiner Projekte aus und ich wollte es so laufen lassen wie früher bei Grunt Watch. Das heißt, es muss weniger Dateien und js-Dateien ansehen, fusseln, zusammenführen, kompilieren und den Browser aktualisieren, sobald alles fertig ist.

Ich schaffte es mit gulp-browser-sync arbeiten, aber aus irgendeinem Grund funktioniert es nur einmal. Ich ändere meine .less-Datei und der Browser lädt neu. Dann, eine zweite Änderung, es kompiliert, aber kein Neuladen geschieht.

Hier das Protokoll:

[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... 

Und wenn ich ein zweites Mal speichern Hit:

[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 

Was die JS, funktioniert es die ganze Zeit. Keine Probleme, auch nachdem die Styles-Aufgabe erledigt wurde, lösen die JS-Änderungen immer noch das Reload aus. Wirklich sind nur die Stile, die Probleme haben.

Hier ist die 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']); 

Vielen Dank für Ihre Hilfe!

Answer 1

Sind Sie sicher, dass das CSS im Browser nicht geändert wird? Neue Stile werden geladen, ohne dass die Seite erneut geladen werden muss. Zumindest ist es das, was mein Schluckaufbau tut.

Versuchen Sie, die .less-Datei zu ändern und festzustellen, ob die Änderung tatsächlich im Browser sichtbar ist.

Answer 2

Wie direkt

nutzen, um über

.pipe(browserSync.stream()) 

Ich hatte mal das gleiche Problem, während ‚.jade‘ Dateien zu ändern, die es nur einmal geladen. Dann wickelte ich browserSync.reload in einer anonymen Funktion wie

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

Es funktioniert für mich. Ich weiß nicht, ob es etwas Besonderes an browserSync.reload. Wie wäre es mit einem Versuch? :)

Answer 3

Meine Situation ist ein wenig anders, aber es könnte ähnlich genug sein, um Ihnen oder jemand anderem zu helfen. Ich habe Schluck + BrowserSync eingerichtet wie folgt:

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

Dies würde starten und öffnen Sie die Seite einmal. Wenn ich die HTML-Seite ändere und sie speichere, könnte ich lint, sass, js und browserSync.reload run sehen, aber der Browser hat nicht aktualisiert. Mein HTML war sehr einfach; dies:

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

ich die HTML diese endlich geändert und es anfing zu arbeiten:

<!doctype html> 
<html> 
<head> 
    <title>TEST</title> 
</head> 
<body> 
HELLO-TEST 
</body> 
</html> 

Answer 4

Für mich in Gulp 4, die anonyme Funktion das Problem nicht lösen, was ich tat, war die einwickeln browserSync.reload() in einer Funktion mit einem getan Rückruf:

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

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