it-swarm.com.de

Die Browsersynchronisierung aktualisiert die Seite nach Änderungen mit Gulp nicht

Ich bin neu in Gulp und wollte das automatische Kompilieren von scss und die Browsersynchronisierung nutzen. Aber ich kann es nicht zum Laufen bringen.

Ich habe alles reduziert, um nur den Inhalt des Beispiels auf der Browsersync-Website zu belassen:

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

Ich kann Schluckaufschlag nennen. Die Seite wird angezeigt und ich erhalte eine Nachricht von Browsersync. Wenn ich das HTML ändere, wird die Seite neu geladen. Wenn ich jedoch das scss ändere, kann ich dies sehen:

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

aber ich muss manuell nachladen. Was vermisse ich?

22
raichu

Sie können die Änderungen einfach einfügen, anstatt eine vollständige Browseraktualisierung bei der SASS-Kompilierung erzwingen zu müssen, wenn Sie möchten.

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

Ich hatte auch ein ähnliches Problem, als ich noch nicht mit der Browsersynchronisierung vertraut war. In der Befehlszeile stand "Browser neu laden", aber der Browser wurde überhaupt nicht aktualisiert Browser-Sync kann Skripte für seine Funktionalität einbinden. Stellen Sie sicher, dass Ihre HTML-Seite ein Body-Tag hat.

36
SU15

Dies liegt daran, dass Sie browserSync.reload Auf der HTML-Uhr und nicht auf der SCSS-Uhr aufrufen.

Versuche dies:

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

Dies ist, was ich benutze und es funktioniert gut in Sass oder anderen Dateien

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

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

Ich bin auf dasselbe Problem gestoßen, als ich versucht habe, php und js Dateien neu zu laden und css Dateien zu streamen. Ich konnte Stream nur mit einer pipe -Methode verwenden, was Sinn macht. Wie auch immer, hier ist, was für mich gearbeitet hat:

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

Aber eigentlich bevorzuge ich @ pixies modifizierte Antwort:

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

Ich hatte auch das gleiche Problem. Es hat funktioniert, als ich die Reload-Methode als separate Aufgabe aufgerufen habe.

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

Wenn Sie die CLI verwenden, ist das Skript manchmal nicht in Ihre HTML-Hauptdateien eingefügt, daher sollten Sie es manuell hinzufügen oder gulp verwenden.

    <!-- 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

Ich füge dies in mein HTML ein, direkt unter dem Body-Tag. Es klappt.

<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