Wie synchronisiert man alle HTML-Dateien mit gulp browsersync?

Question

Ich habe eine Verzeichnisstruktur wie folgt ...

--app 
-css 
    custom.css 
-sass 
    custom.scss 
-pages 
    about.html 
    home.html 
--gulpfile.js 
--node_modules 
--package.json 

meine schluck Datei

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

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

gulp.task('watch', ['browserSync', 'sass'], function() { 
    gulp.watch('app/sass/*.scss', ['sass']); 
    gulp.watch('app/pages/*.html', browserSync.reload); 
    gulp.watch('app/js/**/*.js', browserSync.reload); 
}) 

gulp.task('browserSync', function() { 
    browserSync.init({   
     server: { 
      baseDir: "app", 
      index: "pages/home.html" 
     }, 
     }) 
}) 

ist, wenn ich die Uhr Task ausgeführt i auf localhost umgeleitet bin: 3000, die meine home.html Seite öffnet . und meine Browser-Synchronisierung funktioniert gut.

aber wenn ich rechts auf die Datei about.html klicke und sie im Browser im Visual Studio anschaue, funktioniert die Browser-Synchronisierung nicht in der Seite about.html. und diese Seite öffnet sich als localhost: 56060/app/pages/about.html im Browser.

Wie kann ich die Browsersynchronisierung in allen HTML-Dateien im Seitenverzeichnis funktionieren lassen?

oder was sollte die URL-Adresse des Browsers sein, um auf die Datei about.html zuzugreifen?

Answer 1

Ihr Code sieht gut aus, versuchen Sie Adresse in Browser „Chrome“ Vergangenheit url, natürlich, wenn in Ihrer CMD Konsole Befehl schluck sehen aktiviert ist

http://localhost:3000/pages/about.html 

Denken Sie daran, wenn Sie browserSync in Ihrem Fall aktiviert es gestartet wird in Ordner App, dies ist Ihr localhost: 3000 Server, etwas wie localhost: 56060 ist es nicht Ihre Seite.

In Ihren HTML-Dateien vergessen Sie nicht in CSS Link hinzufügen "/" vor CSS-Ordner.

<link rel="stylesheet" href="/css/custom.css"> 

Wenn Sie noch ausgeben haben, versuchen Sie diesen Code in schluck Aufgabe Uhr:

gulp.task('watch', ['browserSync', 'sass'], function() { 
    gulp.watch('app/sass/*.scss', ['sass']); 
    // gulp.watch('app/pages/*.html', browserSync.reload); // Comment this line 
    gulp.watch("app/**/*.html").on('change', browserSync.reload); // Try this line 
    gulp.watch('app/js/**/*.js', browserSync.reload); 
}) 

gulp.task('browserSync', function() { 
    browserSync.init({   
     server: { 
      baseDir: "app", 
      index: "pages/home.html" 
     }, 
     }) 
}) 

Grüße :)