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