gulp +瀏覽器同步無法獲取/錯誤

Question

我正在學習前端構建系統當前gulp，我想使用brower-sync，問題是它沒有在commad行中引發錯誤，而是在它帶來時瀏覽器不會顯示我的HTML文件，它會在瀏覽器窗口中顯示「無法獲取/」錯誤。這是我的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']); 

我使用Windows和git bash和版本"browser-sync": "^2.12.5"所以有什麼問題，並嘗試對我來說，爲了得到出來的東西它來解釋。

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

我咕嘟咕嘟文件結尾的文件夾結構參考（使用瀏覽器的同步與化身，所以一切都在./_site文件夾中，gulpfile是./）

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

希望它能幫助。

米開朗基羅

Answer 2

可能是你有沒有baseDir: '_site/'index.html？爲了在網絡瀏覽器中看到你的靜態網頁，而不是那個惱人的消息，你必須重命名文件your_file.html到index.html。這將解決不能GET /問題。

Answer 3

我得到這個當index.html文件是同一個文件夾裏面工作：

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

Answer 4

是否有index.html文件在你./public/文件夾？如果沒有，你需要告訴browserSync你的起始頁是什麼。 browserSync不顯示沒有某個插件的目錄的索引。

您也可以嘗試使用public而不帶前導點。

編輯：的startPath config僞似乎不起作用，使用index代替

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

UPDATE：其實你可以得到目錄中browserSync上市。這樣，它會顯示在public文件的列表，而不是不能得到錯誤

... 
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 
    }); 
});