Gulp Frontend Build System

gulpfile.js

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


var options = {
	sourcemaps: './maps',
	pug: {
		src: 'app/pug/**/*.pug',
		dest: 'app'
	},
	sass: {
		src: 'app/scss/**/*.scss',
		dest: 'app/css'
	},
	useref: {
		src: 'app/*.html',
		dest: 'dist'
	},
	images: {
		src: 'app/images/**/*.+(png|jpeg|jpg|gif|svg)',
		dest: 'dist/images'
	},
	fonts: {
		src: 'app/fonts/**/*',
		dest: 'dist/fonts'
	},
	browserSync: {
		baseDir: 'app'
	}
};



/* ========================================= *
 *                 T A S K S                 *
 * ========================================= */

/* Browser-sync
 * ------------ */
gulp.task('browserSync', function(){
	browserSync.init({
		server: {
			baseDir: options.browserSync.baseDir
		}
	});
});


/* ------------------------- *
 *       PREPROCESSING
 * ------------------------- */

/*     Sass
 * ------------ */
gulp.task('sass', function(){
	return gulp.src(options.sass.src)
	.pipe(sourcemaps.init())
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer())
	.pipe(sourcemaps.write(options.sourcemaps))
	.pipe(gulp.dest(options.sass.dest))
	.pipe(browserSync.reload({
		stream: true
	}));
});

/* Pug (Formely known as Jade)
 * --------------------------- */
gulp.task('pug', function(){
	return gulp.src(options.pug.src)
	.pipe(pug())
	.pipe(gulp.dest(options.pug.dest));
});


/* ------------------------- *
 *       OPTIMIZATION
 * ------------------------- */

/* Styles and Scripts
 * ------------------- */
gulp.task('useref', function(){
	return gulp.src(options.useref.src)
	.pipe(useref())
	.pipe(gulpIf('*.js', uglify()))
	.pipe(gulpIf('*.css', cssnano()))
	.pipe(gulp.dest(options.useref.dest));
});

/* Images
 * ------ */
gulp.task('images', function(){
	return gulp.src(options.images.src)
	.pipe(cache(imagemin({
		interlaced: true
	})))
	.pipe(gulp.dest(options.images.dest));
});

/* Fonts
 * ------ */
gulp.task('fonts', function(){
	return gulp.src(options.fonts.src)
	.pipe(gulp.dest(options.fonts.dest));
});


/* ------------------------- *
 *         CLEANUP
 * ------------------------- */

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

gulp.task('clean:cache', function(callback){
	return cache.clearAll(callback);
});


/* ------------------------- *
 *          BUILD
 * ------------------------- */
gulp.task('default', function(callback){
	runSequence(['sass', 'browserSync', 'watch'],
		callback);
});

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


/* ------------------------- *
 *       THE WATCHER
 * ------------------------- */
// Follow this syntax
// gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){

gulp.task('watch', ['browserSync', 'sass', 'pug'], function(){
	gulp.watch(options.pug.src, ['pug']); // Pug
	gulp.watch(options.sass.src, ['sass']); // Sass
	// Reloads the browser whenever HTML or JS files changes
	gulp.watch('app/*.html', browserSync.reload);
	gulp.watch('app/js/**/*.js', browserSync.reload);
});

package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.14.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^0.4.5",
    "gulp-cssnano": "^2.1.2",
    "gulp-if": "^2.0.1",
    "gulp-imagemin": "^3.0.3",
    "gulp-pug": "^3.0.4",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "gulp-useref": "^3.1.0",
    "pug": "^2.0.0-beta5",
    "run-sequence": "^1.2.2"
  }
}