Code to start and optimize a new project.

gulpfile.js

var gulp = require('gulp')
var plumber = require('gulp-plumber')
var eslint = require('gulp-eslint')
var pug = require('gulp-pug')
var stylus = require('gulp-stylus')
var cssnano = require('gulp-cssnano')
var uglify = require('gulp-uglify')
var autoprefixer = require('gulp-autoprefixer')
var imagemin = require('gulp-imagemin')
var browserSync = require('browser-sync').create()

gulp.task('stylus', function prefixesAndOptimizesCSS() {
  return gulp.src('src/styl/app.styl')
    .pipe(plumber())
    .pipe(stylus())
    .pipe(autoprefixer())
    .pipe(cssnano())
    .pipe(gulp.dest('build/css/'))
})

gulp.task('pug', function generateHTML() {
  return gulp.src('src/views/index.pug')
    .pipe(plumber())
    .pipe(pug())
    .pipe(gulp.dest('build/'))
})

gulp.task('js', function validateAndMinifyJS() {
  return gulp.src('src/js/app.js')
    .pipe(plumber())
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(uglify())
    .pipe(gulp.dest('build/js/'))
})

gulp.task('browser-sync', function spawnLocalServer() {
  return browserSync.init({
    server: {
      baseDir: "./build/"
    }
  })
})

gulp.task('reload', function reloadBrowser() {
  return browserSync.reload()
})

gulp.task('build', ['stylus', 'pug', 'js'])

gulp.task('watch', function watchFiles() {
  gulp.watch('src/styl/**/*.styl', ['stylus'])
  gulp.watch('src/views/**/*.pug', ['pug'])
  gulp.watch('src/js/**/*.js', ['js'])
  gulp.watch('build/**/*', ['reload'])
})

gulp.task('default', ['build', 'browser-sync', 'watch'])