gulp +浏览器同步无法获取/错误答案

【问题标题】：gulp + browser-sync Cannot GET / errorgulp +浏览器同步无法获取/错误
【发布时间】：2016-05-02 20:58:27
【问题描述】：

我正在学习当前 gulp 的前端构建系统，我想使用 brower-sync，问题是它没有在命令行中抛出错误，而是当它启动浏览器时它不会显示我的 html文件，它会在浏览器窗口中显示“Cannot GET /”错误。这是我的 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" 那么问题是什么，并尝试为我解释一下，以便从中得到一些东西。

【问题讨论】：

您是否尝试过更改浏览器同步的 baseDir ？尝试../或类似的东西
同目录
您是否尝试过更改 browsersync 变量的定义，例如 var browsersync = require('browser-sync').create()？

标签： gulp browser-sync gulp-browser-sync

【解决方案1】：

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

您也可以尝试使用不带前导点的public。

编辑： startPath 配置指令似乎不起作用，请改用index

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

更新：其实你可以通过 browserSync 获取目录列表。这样它会在public 中显示文件列表，而不是无法获取错误

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

【讨论】：

然后它要求保存文件：/
您使用index 指向的服务器上是否有实际文件？

【解决方案2】：

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

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

【讨论】：

我的 gulp 3 gulpfile 有一个空字符串作为 baseDir，从 '' 变为 '.'在 gulp4 和最新的 browserSync 中解决了它。在更改之前无法加载任何 HTML 文件。目录浏览不能单独访问文件。

【解决方案3】：

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

      server: {
            baseDir: "./"
            },

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

【讨论】：

请描述您所做的更改，以便其他读者可以从您的回答中受益更多

【解决方案4】：

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

【讨论】：

【解决方案5】：

我通过始终指向代码中的 .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']);

希望对你有帮助。

米开朗基罗

【讨论】：

【解决方案6】：

可能你在baseDir: '_site/' 中没有index.html？为了在网络浏览器中看到您的静态网页而不是那个烦人的消息，您必须将文件 your_file.html 重命名为 index.html。这将解决Cannot GET/问题。

【讨论】：

【解决方案7】：

就我而言，这对我有帮助：

server: {
            baseDir: '.',
            index: "index.html"
        }

【讨论】：

【解决方案8】：

gulp.task('server', function()
{
        browserSync.init(["public/src/css/","public/src/js"],{ 
            server: "./",
            startPath: "./index.html", // After it browser running
            //    browser: 'chrome',
            host: 'localhost',
            //       port: 4000,
            open: true,
            tunnel: true    }); 
});

gulp.task('default', ['scripts', 'styles', 'html', 'server', 'watch']);

【讨论】：