Sass & JS minification

gulpfile.js

/* jshint node: true, strict: global */
'use strict';
 
var gulp = require('gulp');
var minifyJs = require('gulp-minify');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var autoprefix  = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

/**
 * Paths to certain files
 */
var pathsInput = {
	sass: ['./src/sass/**/*.scss'],
	js: ['./src/js/**/*.js'],
	html: ['./**/*.html']
};

/**
 * Paths to output folders
 */
var pathsOutput = {
	css: './css',
	js: './js',
};

/**
 * sass compilation options
 */
var sassOptions = {
	errLogToConsole: true,
	outputStyle: 'compressed' // compressed, expanded
};

/**
 * Browser support for autoprefixer
 */
var autoprefixerOptions = {
	browsers: [
		'last 10 Chrome versions',
		'Firefox >= 23',
		'ie >= 9',
		'Safari >= 7'
	]
};

/**
 * Default sass task
 */
gulp.task('sass', function() {
	return gulp.src(pathsInput.sass)
		.pipe(sass(sassOptions).on('error', sass.logError))
		.on('error', function(error) {
			browserSync.notify(error.message, 3000);
			this.emit('end');
		})
		.pipe(cleanCss())
		.pipe(autoprefix(autoprefixerOptions))
		.pipe(gulp.dest(pathsOutput.css))
		.pipe(browserSync.stream());
});

gulp.task('js', function() {
	return gulp.src(pathsInput.js)
		.pipe(minifyJs({
			noSource: true,
			ext: {
				min: '.min.js'
			}
		}))
		.pipe(gulp.dest(pathsOutput.js));
});

/**
 * Watch task for compiling sass
 */
gulp.task('watch', ['sass', 'js'], function() {
	gulp.watch(pathsInput.sass, ['sass'])
		.on('change', function(event) {
			console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
		});
	gulp.watch(pathsInput.js, ['js'])
		.on('change', function(event) {
			console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
		});
});

/**
 * Start BrowserSync and watch files
 */
gulp.task('serve', ['watch'], function() {
	browserSync.init({
		server: {
			baseDir: './',
			online: true
		},
	});

	gulp.watch(pathsInput.html, browserSync.reload);
	gulp.watch(pathsInput.js, browserSync.reload);
});

/**
 * Compile sass and watch for changes
 */
gulp.task('default', ['watch']);