gulp + browser-sync Cannot GET / error
Solution 1
Is there an index.html
file in your ./public/
folder? If not, you need to tell browserSync what is your start page. You can also get browserSync to show the listing of the base directory, see update below.
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
}
});
});
...
Solution 2
I got this to work when the index.html file was inside the same folder:
browserSync.init({
server: {
baseDir: "./"
}
});
Solution 3
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
},
port: 8080,
open: true,
notify: false
});
});
Solution 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
});
Yasin
Updated on July 16, 2022Comments
-
Yasin almost 2 years
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. -
Dethariel over 6 yearsPlease, describe the changes that you made so that other readers can benefit more from your answer
-
Tyeth over 4 yearsmy gulp 3 gulpfile had an empty string as baseDir, changing from '' to '.' solved it in gulp4 and latest browserSync. Before change no HTML file could be loaded. Directory browsing worked just not individual file access.
-
Tharaka Nuwan almost 4 yearsThen it asking for save file :/
-
lofihelsinki almost 4 yearsDo you have the actual file on the server you're pointing to with
index
?