Gulp SASS Watcher Tasks With Theme Support

gulpfile.js

/*
 * This is a simple Gulp SASS Watcher task, that support themes... yeah!
 * Usage: gulp watch:scss --theme dark-theme OR gulp watch:scss -t my-flat-theme ('base' is the default theme name)
 * But dark-theme config (assets source dir which is a glob string, and destination dir) must be set in the config variable
 * It's basically just a simple way, to make changing assets directories more dynamic!
 * Just change the theme's config variables, and update the theme name within the command, and you're all set!
 * Very Important Note! : 
 * ** What to do with the theme's source assets (scss files and such) is totally up to you... just lettin' you know.
*/

var gulp         = require('gulp'),
    gutil        = require('gulp-util'),
    cssshrink    = require('gulp-cssshrink'),
    sass         = require('gulp-sass'), 
    rename    	 = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    livereload 	 = require('gulp-livereload'),
    header 	 = require('gulp-header'),
    changed	 = require('gulp-changed'),
    
    pkg		 = require('./package.json');


var date = require('moment')().format('MMMM Do YYYY, h:mm:ss');
var banner = [
  '/* **************************************************** ',
  ' * <%= pkg.name %> | Version: <%= pkg.version %>',
  ' * Built On: ' + date,
  ' ****************************************************** */ \n\n ', 
].join('\n');

var config = {
	sassImportPaths: [ 'public/vendor', 'public/scss' ],
	
	themes: {
		base: {
			src: 'assets/scss/themes/base/**/*.scss', dest: 'public/css/themes/base/'
		},
		backend: {
			src: '', dest: ''
		}
	}
};

function setThemeWatcher( themeName ) {
	var themeConfig = config.themes[ themeName ];

	livereload.listen();

	gulp.watch( themeConfig.src, [ 'scss:' + themeName ] );
}

function setThemeTask( themeName ) {
	var themeConfig = config.themes[ themeName ],
		taskName	= 'scss:' + themeName;


	gulp.task(taskName, function() {
		return gulp.src( themeConfig.src )
			.pipe( changed( themeConfig.dest ) )
			.pipe( sass({ includePaths: config.sassImportPaths }) )
			.pipe( autoprefixer({ browsers: ['last 30 versions'], cascade: true }) )
			.pipe( header( banner, { pkg: pkg } ) )
			.on('error', gutil.log).on('error', gutil.beep)
			.pipe( gulp.dest( themeConfig.dest ) )
			.pipe( cssshrink() )
			.pipe( header( banner, { pkg: pkg }) )
			.pipe( rename({ extname: '.min.css' }) )
			.on('error', gutil.log).on('error', gutil.beep)
			.pipe( gulp.dest( themeConfig.dest ) )
			.pipe(livereload({ auto: false }));
	});

}

gulp.task('watch:scss', function() {
	var themeName = gutil.env.theme || gutil.env.t || 'base' ; // "Base" is the default theme name

	setThemeTask( themeName );
	setThemeWatcher( themeName );
});