Sass & Pug + BrowserSync

gulpfile.js

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


// Compile pug files into HTML
gulp.task('pug', function () {
  return gulp.src('src/pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('dist'));
});

// Compile sass files into CSS
gulp.task('sass', function () {
  return gulp.src('src/sass/main.sass')
    .pipe(sass({
      includePaths: ['src/sass'],
      errLogToConsole: true,
      outputStyle: 'compressed',
      onError: browserSync.notify
    }))
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream());
});

// Serve and watch sass/pug files for changes
gulp.task('watch', ['pug', 'sass'], function () {
  browserSync.init({
      server: 'dist'
  }),

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

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