gulp

gulpfile.js

var gulp = require('gulp'),
	merge = require('merge-stream'),
	runSequence = require('run-sequence'),
	plumber = require('gulp-plumber'),
	clean = require('gulp-clean'),
	sass = require('gulp-sass'),
	watch = require('gulp-watch'),
	livereload = require('gulp-livereload'),
	embedLiveReload = require('gulp-embedlr'),
	minifyCss = require('gulp-minify-css'),
	autoprefixer = require('gulp-autoprefixer'),
	polyfill = require('gulp-myth'),
	uglify = require('gulp-uglify'),
	jshint = require('gulp-jshint');


var Folder = {
	assets: 'app',
	dist: 'dist'
};
var Path = {
	sassSrc: Folder.assets + '/styles/*.scss',
	cssDest: Folder.dist + '/css',
	customJsSrc: Folder.assets + '/scripts/**/!(*.min.js)',
	minJsSrc: Folder.assets + '/scripts/**/*.min.js',
	jsDest: Folder.dist + '/js',
	imagesSrc: Folder.assets + '/images/**',
	imagesDest: Folder.dist + '/img'
};

gulp.task('build-only', function() {
	return merge(
		// copy images
		gulp.src(Path.imagesSrc)
			.pipe(gulp.dest(Path.imagesDest)),

		// copy other files
		gulp.src(Folder.assets + '/*.*', {dot: true})
			.pipe(gulp.dest(Folder.dist)),

		// sass -> minified, autoprefixed css
		gulp.src(Path.sassSrc)
			.pipe(sass())
			.pipe(autoprefixer())
			.pipe(polyfill())
			.pipe(minifyCss())
			.pipe(gulp.dest(Path.cssDest)),

		// copy minified js
		gulp.src(Path.minJsSrc)
			.pipe(gulp.dest(Path.jsDest)),

		// uglify our js
		gulp.src(Path.customJsSrc)
			.pipe(jshint())
			.pipe(uglify())
			.pipe(gulp.dest(Path.jsDest))
	);
});

gulp.task('watch', function() {
	livereload.listen();
	gulp.watch(Folder.dist + '/**').on('change', livereload.changed);

	return merge(
		gulp.src(Folder.assets + '/index.html')
			.pipe(watch())
			.pipe(embedLiveReload())
			.pipe(gulp.dest(Folder.dist)),

		gulp.src([Folder.assets + '/*.*', '!' + Folder.assets + '/index.html'], {dot: true})
			.pipe(watch())
			.pipe(gulp.dest(Folder.dist)),

		gulp.src(Path.sassSrc)
			.pipe(watch())
			.pipe(plumber())
			.pipe(sass())
			.pipe(autoprefixer())
			.pipe(polyfill())
			.pipe(gulp.dest(Path.cssDest)),

		gulp.src(Path.minJsSrc)
			.pipe(watch())
			.pipe(gulp.dest(Path.jsDest)),

		gulp.src(Path.customJsSrc)
			.pipe(watch())
			.pipe(plumber())
			.pipe(jshint())
			.pipe(gulp.dest(Path.jsDest))
	);
});

gulp.task('clean', function() {
	return gulp.src(Folder.dist, {read: false})
		.pipe(clean({force: true}));
});

gulp.task('build', function(cb) {
	runSequence('clean', 'build-only', cb);
});

gulp.task('default', function(cb) {
	runSequence('build', 'watch', cb);
});

packages

npm install --save-dev gulp merge-stream run-sequence gulp-plumber gulp-clean gulp-sass gulp-watch gulp-livereload gulp-embedlr gulp-minify-css gulp-autoprefixer gulp-myth gulp-uglify gulp-jshint