basic gulpfile

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
var useref = require("gulp-useref");
var uglify = require("gulp-uglify");
var gulpIf = require("gulp-if");
var cssnano = require("gulp-cssnano");
var imagemin = require("gulp-imagemin");
var cache = require("gulp-cache");
var del = require("del");
var browserSync = require("browser-sync").create();
var runSequence = require("run-sequence");

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

gulp.task("useref", function(){
  return gulp.src("app/*.html")
    .pipe(useref())
    .pipe(gulpIf("*.js", uglify()))
    .pipe(gulpIf("*.css", cssnano()))
    .pipe(gulp.dest("dist"))
});

gulp.task("images", function(){
  return gulp.src("app/img/**/*.+(png|jpg|gif|svg)")
    .pipe(cache(imagemin()))
    .pipe(gulp.dest("dist/img"));
});

gulp.task("clean:dist", function() {
  return del.sync("dist");
});

gulp.task("browserSync", function() {
  browserSync.init({
    server: {
      baseDir: "app"
    },
  });
});

gulp.task("watch", ["browserSync", "sass"], function () {
  gulp.watch("app/scss/**/*.scss", ["sass"]);
  gulp.watch("app/*.html", browserSync.reload);
  gulp.watch("app/js/**/*.js", browserSync.reload);
});

gulp.task("build", function (callback) {
  runSequence(
      "clean:dist",
      ["sass", "useref", "images"],
      callback
      );
});

gulp.task("default", function (callback) {
  runSequence(
    ["sass","browserSync", "watch"],
    callback
  );
});