javascript - BrowserSync Not Loading - Stack Overflow

admin管理员组

文章数量:1427149

Very new to BrowserSync. I'm trying to find out how to get it going haha.

My main file that stores everything is called 'gulpwork'.

Inside it I have 4 folders; two to convert Pug ('src') to HTML ('dist') and two to convert SASS ('sass') to CSS ('css').

I've managed to get BrowserSync to run however I'm getting the 'Cannot GET /' message so I know it probably has something to do with file directory.

I would like to have both Pug and SASS synced.

EDIT: It only works if I have both my Pug and HTML file outside their respected folders directly inside my root and it only works if the HTML file is named index.html. How can I get it to work in its respected folders and without having to change the name to index?

Here is my gulpfile.js code:

JS:

var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('browserSync', ['sass', 'pug'], function() {
browserSync.init({
    server: {
        baseDir: './'
    }
})
});

gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
    pretty: true
}))
.pipe(gulp.dest('./dist'))   
});

gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}))
});


gulp.task('watch', ['browserSync'], function() {

gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['sass', 'pug', 'watch']);

Very new to BrowserSync. I'm trying to find out how to get it going haha.

My main file that stores everything is called 'gulpwork'.

Inside it I have 4 folders; two to convert Pug ('src') to HTML ('dist') and two to convert SASS ('sass') to CSS ('css').

I've managed to get BrowserSync to run however I'm getting the 'Cannot GET /' message so I know it probably has something to do with file directory.

I would like to have both Pug and SASS synced.

EDIT: It only works if I have both my Pug and HTML file outside their respected folders directly inside my root and it only works if the HTML file is named index.html. How can I get it to work in its respected folders and without having to change the name to index?

Here is my gulpfile.js code:

JS:

var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('browserSync', ['sass', 'pug'], function() {
browserSync.init({
    server: {
        baseDir: './'
    }
})
});

gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
    pretty: true
}))
.pipe(gulp.dest('./dist'))   
});

gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}))
});


gulp.task('watch', ['browserSync'], function() {

gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['sass', 'pug', 'watch']);

• javascript
• node.js
• npm
• sass
• gulp

Share Improve this question Follow asked Oct 15, 2017 at 22:50 RogerFedFanRogerFedFan 56611 gold badge99 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Figured it out. BrowserSync looks for an 'index.html' file to start up and we get the 'cannot GET /' error because it's looking for something it doesn't see. So wherever our pug/html files are located, we must tell the pug function + the watch function where they are and then run BrowserSync. After it's run, you will still see the error however it's really working. All you have to do is link to the file so in my browser after localhost:3000 I would type the location of my file, so it would be 'localhost:3000/dist/about.html' After that, BrowserSync works. :)

var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('browserSync', ['sass', 'pug'], function() {
browserSync.init({
    server: {
        baseDir: './'
    }
})
});

gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
    pretty: true
}))
.pipe(gulp.dest('./dist'));   
});

gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}));
});


gulp.task('watch', ['browserSync'], function() {

gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['sass', 'pug', 'watch']);

gulp.task('browser-sync', function() {
    browserSync.init({
        watch: true,       // <-- Adding this line solved my reload problem
        server: {
            baseDir: './'
        },
        port: 8080    // <-- If you have problems with port 3000 try changing it like this
    });
});

本文标签： javascriptBrowserSync Not LoadingStack Overflow