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

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