gulp + browser-sync无法获取/错误

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

index.html你的./public/文件夹中有文件吗？如果没有,您需要告诉browserSync您的起始页是什么.您还可以使用browserSync来显示基本目录的列表,请参阅下面的更新.

您也可以尝试使用public没有前导点.

编辑: startPath配置指令似乎不起作用,index而是使用

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

更新:实际上您可以使用browserSync获取目录列表.这样它会显示一个文件列表public,而不是Can not Get错误

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

Answer 2

当 index.html 文件在同一个文件夹中时，我得到了这个：

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

Answer 3

我解决了浏览器同步中的“无法获取”错误，方法是始终指向代码中的 .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 -->

我的 Gulp 文件供参考（使用浏览器同步与 jekyll，所以所有内容都在 ./_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']);

希望能帮助到你。

米开朗基罗