gulp + browser-sync GET /エラーできません

Question

私は現在フロントエンドのビルドシステムを学んでいますが、私はbrower-syncを使用したいのですが、それはcommadラインにエラーを投げるのではなく、ブラウザを起動すると、HTMLファイルが表示されず、ブラウザウィンドウに「Can not GET /」というエラーが表示されます。これは私が窓を使用していますとのgit bashのバージョンが"browser-sync": "^2.12.5"ので、何が問題であり、それから何かを得るために私のために説明しようとは私gulpfile.jsコード

var gulp = require('gulp'), 
    uglify = require('gulp-uglify'), 
    compass= require('gulp-compass'), 
    plumber = require('gulp-plumber'), 
    autoprefixer = require('gulp-autoprefixer'), 
    browserSync = require('browser-sync'), 
    reload = browserSync.reload, 
    rename = require('gulp-rename'); 


gulp.task('scripts', function() { 
    gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js']) 
     .pipe(plumber()) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify()) 
     .pipe(gulp.dest('public/src/js/')); 
}); 

gulp.task('styles', function() { 
    gulp.src('public/src/scss/main.scss') 
     .pipe(plumber()) 
     .pipe(compass({ 
      config_file: './config.rb', 
      css: './public/src/css/', 
      sass: './public/src/scss/' 
     })) 
    .pipe(autoprefixer('last 2 versions')) 
    .pipe(gulp.dest('public/src/css/')) 
    .pipe(reload({stream:true})); 
}); 


gulp.task('html', function() { 
    gulp.src('public/**/*.html'); 
}); 

gulp.task('browser-sync', function() { 
    browserSync({ 
     server: { 
     baseDir: "./public/" 
     } 
    }); 
}); 

gulp.task('watch', function() { 
    gulp.watch('public/src/js/**/*.js', ['scripts']); 
    gulp.watch('public/src/scss/**/*.scss', ['styles']); 
    gulp.watch('public/**/*.html', ['html']); 
}); 

gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']); 

です。

Answer 1

私は私のために、ブラウザの同期でエラー常にコード内の.htmlファイルを指すことによって、またはで終わるフォルダ構造を持つことにより、およびindex.htmlを

<a href="/about">About</a> <!-- Cannot GET error--> 
<a href="/about">About</a> <!-- same code as above, but works if your site structure is: ./about/index.html--> 
<a href="/about.html">About</a> <!-- OK --> 

マイがぶ飲みファイル「を取得することはできません」解決

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

gulp.task('build', shell.task(['jekyll build --watch'])); 

// serving blog with Browsersync 
gulp.task('serve', function() { 
    browserSync.init(
     { 
      server: {baseDir: '_site/'} 
     } 
    ); 

    // Reloads page when some of the already built files changed: 
    gulp.watch('_site/**/*.*').on('change', browserSync.reload); 
}); 

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

を（ジキルとブラウザ同期を使用して、そのすべてが./_siteフォルダ内にあり、かつgulpfileは./である）の参照は、それがお役に立てば幸いです。

ミケランジェロ

Answer 2

あなたはbaseDir: '_site/'でindex.htmlを持っていないことができますか？その迷惑なメッセージではなく、Webブラウザで静的なWebページを表示するには、ファイル名をyour_file.htmlからindex.htmlに変更する必要があります。これはGET /問題を解決できません。

Answer 3

index.htmlファイルが同じフォルダ内にいたとき、私は仕事にこれを得た：

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

Answer 4

はあなたの./public/フォルダ内のindex.htmlファイルはありますか？そうでなければ、browserSyncに開始ページが何であるかを伝える必要があります。 browserSyncはプラグインなしのディレクトリのインデックスを表示しません。

また、publicを先頭のドットなしで使用することもできます。

編集：startPathの設定ディレクティブが動作していないようは、index代わり

... 
gulp.task('browser-sync', function() { 
    browserSync({ 
    server: { 
     baseDir: "public/", 
     index: "my-start-page.html" 
    } 
    }); 
}); 
... 

UPDATEを使用します。実際にあなたがbrowserSyncでディレクトリ一覧を取得することができます。それはないインクルードがエラー

... 
gulp.task('browser-sync', function() { 
    browserSync({ 
    server: { 
     baseDir: "public/", 
     directory: true 
    } 
    }); 
}); 
... 

Answer 5

gulp.task('serve',['sass'], function() { 
    bs.init({ 
     server: "./app", 
     startPath: "/index.html", // After it browser running 
     browser: 'chrome', 
     host: 'localhost', 
     port: 4000, 
     open: true, 
     tunnel: true 
    }); 

Answer 6

gulp.task('browser-sync', function() { 
    browserSync({ 

     server: { 
      baseDir: "./" 
      }, 

      port: 8080, 
      open: true, 
      notify: false 
    }); 
});