gulp browsersyncを使用してすべてのhtmlファイルを同期するにはどうすればよいですか？

Question

私はこのようなディレクトリ構造を持っている...

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

私の一気ファイルが

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" 
     }, 
     }) 
}) 

私はローカルホストにリダイレクトしています時計のタスクを実行です：3000私のhome.htmlページを開きます。私のブラウザの同期がうまくいきます。

about.htmlファイルを右クリックしてビジュアルスタジオのブラウザで表示すると、about.htmlページでブラウザ同期が機能しません。このページはブラウザでlocalhost：56060/app/pages/about.htmlとして開きます。

ページディレクトリ内のすべてのhtmlファイルでブラウザ同期を動作させるにはどうすればよいですか？

about.htmlファイルにアクセスするにはブラウザのURLアドレスはどうすればよいですか？あなたのコードは正常に見える

Answer 1

、ブラウザに「クローム」の過去のURLアドレスを試し、ofcourseのあなたのCMDコンソールコマンドでがぶ飲みはを見たときに

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

は、あなたがあなたのケースでbrowserSyncを起動した場合、それが開始さを覚えておいてください起動していますのアプリケーションのlocalhost：3000サーバーのようなものですが、localhost：56060のようにあなたのページではありません。

あなたのhtmlファイルでは、CSSのリンクの前に "/"を追加することを忘れないでください。

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

あなたはまだ問題が発生した場合、ゴクゴクタスク時計にこのコードを試してみてください。

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" 
     }, 
     }) 
}) 

よろしく:)