gulp +浏览器同步无法获取/错误 [英] gulp + browser-sync Cannot GET / error

问题描述

我正在学习前端编译系统，我想使用brower-sync，问题在于它没有在commad行中抛出错误，而是当它调出浏览器时它不会显示我的html文件，它会在浏览器窗口中显示无法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'，'！ （$）$ b $（$）$ b $（$）$ b $（$） b .pipe（uglify（））
 .pipe（gulp.dest（'public / src / js /'））; 
}）; 
 $ b $ gulp.task（'styles'，function（）{
 gulp.src（'public / src / scss / main.scss'）
 .pipe（plumber（） ）
 .pipe（指南针（{
 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}））; 
}）; 
 
 $ b gulp.task（'html'，function（）{
 gulp.src（'public / ** / *。html'）; 
}） ; 
 $ b gulp.task（'browser-sync'，function（）{
 browserSync（{
 server：{
 baseDir：./public/
} 
}）; 
}）; 
 $ b gulp.task（'watch'，function（）{
 gulp.watch（'public / src / js / ** / *。js'，['scripts']）; 
 gulp.watch（'public / src / scss / ** / *。scss'，['styles']）; 
 gulp.watch（'public / ** / *。html'，[ 'html']）; 
}）; 
 $ b gulp.task（'default'，['scripts'，'styles'，'html'，'browser-sync'，'watch']）; 
  

我使用的是windows和git bash，版本是browser-sync ：^ 2.12.5那么是什么问题，并尝试为我解释，以便从中得到一些东西。

解决方案

您的 ./ public / 文件夹中是否存在 index.html 文件？如果没有，你需要告诉browserSync你的起始页是什么。 browserSync不显示没有插件的目录的索引。

您也可以尝试使用 public

编辑： startPath config指令看起来不起作用，请使用 index b
$ b

  ... 
 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 /， 
目录：true 
} 
}）; 
}）; 
 ... 
  

I am learning the front-end build system currently gulp, i want to use brower-sync and the problem is it is not throwing an error in the commad line but instead when it brings up the browser it will not display my html file and it will say "Cannot GET /" error in the browser window. This is my gulpfile.js code

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

i am using windows and git bash and version is "browser-sync": "^2.12.5" so what is the problem and try to explain for me in order to get something out of it.

解决方案

Is there an index.html file in your ./public/ folder? If not, you need to tell browserSync what is your start page. browserSync doesn't show an index of a directory without some plugin.

You could also try to use public without the leading dot.

Edit: The startPath config directive does not seem to work, use index instead

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

UPDATE: Actually you can get directory listing with browserSync. That way it would show a list of files in public, not the Cannot Get error

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

这篇关于gulp +浏览器同步无法获取/错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！