Help with the Gulpjs

Question

I’m having a bit of a problem with Gulp’s tasks. I am trying to listen to the changes of the files with watch and update the browser with Sync browser.

Follows the code:

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

gulp.task('sass', function(){
    return gulp.src('./sass/*scss')
    .pipe(sass())
    .on('error', function(err){console.log(err.message); })
    .pipe(gulp.dest('./dist/css'))
});


gulp.task('pug', function(){
    return gulp.src('./views/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./dist/pages'))
});

gulp.task('browserSync', function(){
    return browserSync.init(['./dist/pages','./dist/css/*css', './dist/js/*js'], {
        server:{
            baseDir: './'
        }
    })
});

gulp.task('default', ['pug', 'sass', 'browserSync'], function(){
    gulp.watch('./')
});

My Hierarchy of Folders:

The message appears in the browser:

Cannot GET /

Answer 1

You guys, I got this mess fixed! I’ll post the code and explain why I can help other people.

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

gulp.task('sass', function(){
    return gulp.src('./sass/*scss')
    .pipe(sass())
    .on('error', function(err){console.log(err.message); })
    .pipe(gulp.dest('./dist/css'))
});


gulp.task('pug', function(){
    return gulp.src('./views/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./dist/pages'))
});

gulp.task('browserSync', function(){
    return browserSync.init(['./dist/pages/*.html','./dist/css/*.css', './dist/js/*.js'], {
        server:{
            baseDir: './',
            index: './dist/pages/index.html'
        }
    })
});

gulp.task('default', ['pug', 'sass', 'browserSync'], function(){
    gulp.watch(['./sass/*scss','./views/*pug'], ['sass', 'pug'])
});

Some details were missing, for example: 1 - Place '.' in file extensions

browserSync.init(['./dist/pages/*.html','./dist/css/*.css', './dist/js/*.js']

2 - Specify in Gulp.watch what I wanted him to hear

gulp.watch(['./sass/*scss','./views/*pug'], ['sass', 'pug'])

Now it’s all working ok!