Przeglądarka-sync nie odświeża strony po zmianach z Gulpem

Question

Jestem nowicjuszem w Gulp i chciałem skorzystać z jego automatycznej kompilacji scss i synchronizacji przeglądarki. Ale nie mogę zmusić go do działania.

rozebrałem wszystko w dół, aby pozostawić tylko zawartość przykład na stronie internetowej Browsersync:

http://www.browsersync.io/docs/gulp/#gulp-sass-css

var gulp  = require('gulp'); 
var browserSync = require('browser-sync').create(); 
var sass  = require('gulp-sass'); 

// Static Server + watching scss/html files 
gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
     server: "./app" 
    }); 

    gulp.watch("app/scss/*.scss", ['sass']); 
    gulp.watch("app/*.html").on('change', browserSync.reload); 
}); 

// Compile sass into CSS & auto-inject into browsers 
gulp.task('sass', function() { 
    return gulp.src("app/scss/*.scss") 
     .pipe(sass()) 
     .pipe(gulp.dest("app/css")) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('default', ['serve']); 

mogę zadzwonić łyk służyć. Witryna jest wyświetlana i otrzymuję komunikat od Browsersync. Kiedy modyfikuję HTML, strona jest przeładowywana. Kiedy jednak zmodyfikować SCSS, widzę to:

[BS] 1 file changed (test.css) 
[15:59:13] Finished 'sass' after 18 ms 

ale muszę przeładować ręcznie. czego mi brakuje?

Answer 1

Wystarczy wprowadzić zmiany zamiast wymusić pełne odświeżanie przeglądarki na SASS kompilacji, jeśli chcesz.

browserSync.init({ 
    injectChanges: true, 
    server: "./app" 
}); 

gulp.task('sass', function() { 
    return gulp.src("app/scss/*.scss") 
     .pipe(sass()) 
     .pipe(gulp.dest("app/css")) 
     .pipe(browserSync.stream({match: '**/*.css'})); 
}); 

Answer 2

To dlatego, że dzwonisz pod numer browserSync.reload na zegarze html, a nie na zegarku.

Spróbuj tego:

gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload); 
gulp.watch("app/*.html").on('change', browserSync.reload); 

Answer 3

To właśnie używam i to działa w porządku w Sass lub inne pliki

gulp.task('browser-sync', function() { 
    var files = [ 
     '*.html', 
     'css/**/*.css', 
     'js/**/*.js', 
     'sass/**/*.scss' 
    ]; 

    browserSync.init(files, { 
     server: { 
     baseDir: './' 
     } 
    }); 
}); 

Answer 4

I obejmuje to na moim html, tuż poniżej znacznika body. To działa.

<script type='text/javascript' id="__bs_script__">//<![CDATA[ 
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]> 
</script> 

Answer 5

uruchomiony na ten sam problem próbuje przeładować php i js plików i strumień css plików. Byłem w stanie używać strumienia tylko przy użyciu metody pipe, co ma sens. W każdym razie, oto co pracował dla mnie:

gulp.watch(['./**/*.css']).on('change', function (e) { 
    return gulp.src(e.path) 
     .pipe(browserSync.stream()); 
}); 

Ale faktycznie wolę @ odpowiedź Pixie jest modyfikowany:

gulp.task('default', function() { 
    var files = [ 
      './**/*' 
     ]; 
    browserSync.init({ 
     files : files, 
     proxy : 'localhost', 
     watchOptions : { 
      ignored : 'node_modules/*', 
      ignoreInitial : true 
     } 
    }); 
}); 

Answer 6

miałem również ten sam problem. Zadziałało, gdy nazwałem metodę ponownego ładowania jako oddzielne zadanie.

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

gulp.task('reload', function(){ 
    browserSync.reload() 
}) 

gulp.task('watch', ['sass', 'css', 'browserSync'], function(){ 
    gulp.watch('*.html', ['reload']); 
}) 

Answer 7

ja też do czynienia z podobnym problemem, kiedy było nowe zwyczaje przeglądarce synchronizacji, wiersza polecenia mówił „przeładowywania przeglądarek”, ale przeglądarka nie została odświeżona w ogóle, problem został miałem nieuwzględnione ciało tag na mojej stronie HTML, gdzie synchronizacja przeglądarki może wstrzyknąć skrypt ze względu na jego funkcjonalność, upewnij się, że strona HTML ma tag body.