Schluck + Browser-Sync Kann nicht GET/Fehler

Question

Ich lerne das Front-End-Build-System derzeit Schluck, ich möchte Brower-Sync verwenden und das Problem ist es wirft keinen Fehler in der Commad-Zeile, sondern wenn es bringt up the browser wird es nicht meine HTML-Datei anzeigen und es wird sagen, "Kann nicht GET /" Fehler im Browserfenster. Das ist mein 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']); 

Ich verwende Windows und git bash und Version ist "browser-sync": "^2.12.5" so, was das Problem ist und versuchen, für mich, um zu erklären, was davon zu bekommen.

Answer 1

Ich löste meinen Fehler in Browser-Sync „kann nicht“ von immer im Code auf eine HTML-Datei zeigt, oder durch eine Ordnerstruktur mit und 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 --> 

Meine Gulp Datei mit der Endung mit für Referenz (unter Verwendung von Browser-Sync mit jekyll, also alles im ./_site Ordner vorhanden ist, und die gulpfile ist in ./)

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

Hoffe, es hilft.

Michelangelo

Answer 2

können Sie nicht index.html in baseDir: '_site/' sein? Um Ihre statische Web-Seite im Web-Browser statt dieser lästigen Nachricht zu sehen, müssen Sie eine Datei your_file.html in umbenennen. Dies löst nicht GET/Problem.

Answer 3

Ich habe dies funktioniert, wenn die Datei index.html im gleichen Ordner war:

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

Answer 4

Gibt es eine index.html Datei in Ihrem ./public/ Ordner? Wenn nicht, müssen Sie browserSync mitteilen, was Ihre Startseite ist. browserSync zeigt keinen Index eines Verzeichnisses ohne ein Plugin an.

Sie könnten auch versuchen, public ohne den führenden Punkt zu verwenden.

Edit: Die StartPath Config-Direktive nicht zu funktionieren scheint, benutzen Sie index statt

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

UPDATE: Eigentlich können Sie Verzeichnisliste mit browserSync zu bekommen. Auf diese Weise wird eine Liste der Dateien in public zeigen würde, nicht die Can not Get Fehler

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