it-swarm.dev

la sincronizzazione del browser non aggiorna la pagina dopo le modifiche con Gulp

Sono nuovo di Gulp e volevo sfruttare la compilazione automatica degli scss e la sincronizzazione del browser. Ma non riesco a farlo funzionare.

Ho rimosso tutto per lasciare solo il contenuto dell'esempio sul sito Web 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']);

Posso chiamare gulp serve. Il sito viene visualizzato e ricevo un messaggio da Browsersync. Quando modifico l'HTML, la pagina viene ricaricata. Quando comunque modifico lo scss, posso vedere questo:

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

ma devo ricaricare manualmente. Cosa mi sto perdendo?

22
raichu

Puoi semplicemente inserire le modifiche invece di forzare un aggiornamento completo del browser sulla compilazione SASS, se lo desideri.

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'}));
});
16
Dan Gamble

Ho anche riscontrato un problema simile quando ero nuovo nell'uso della sincronizzazione del browser, la riga di comando diceva "ricaricare i browser" ma il browser non era affatto aggiornato, il problema era che non avevo incluso il tag body nella mia pagina HTML in cui il la sincronizzazione del browser può inserire script per le sue funzionalità, assicurati che la tua pagina HTML abbia tag body.

36
SU15

Questo perché stai chiamando browserSync.reload sull'orologio html e non sull'orologio scss.

Prova questo:

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

Questo è quello che uso e funziona bene in sass o in qualsiasi altro file

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

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

Si è imbattuto in questo stesso problema provando a ricaricare i file php e js e eseguire lo streaming dei file css. Sono stato in grado di utilizzare lo streaming solo usando un metodo pipe, il che ha senso. Comunque, ecco cosa ha funzionato per me:

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

Ma in realtà preferisco la risposta di @ pixie modificata:

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

Ho avuto anche lo stesso problema. Ha funzionato quando ho chiamato il metodo di ricarica come attività separata.

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']);
})
1
Lasithds

A volte quando si utilizza l'interfaccia della riga di comando non è stato inserito lo script nei file HTML principali, quindi è necessario aggiungerlo manualmente o utilizzare gulp.

    <!-- START: BrowserSync Reloading -->
    <script type='text/javascript' id="__bs_script__">
        //<![CDATA[
        document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("Host", location.hostname));
        //]]>
    </script>
    <!-- END: BrowserSync Reloading -->
1
Ahmad Awais

Lo includo sul mio html, proprio sotto il tag body. Funziona.

<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>
0
user3660139