Skip to content

Instantly share code, notes, and snippets.

@breda
Last active August 29, 2015 14:13
Show Gist options
  • Save breda/317fd2e49441632d3c4e to your computer and use it in GitHub Desktop.
Save breda/317fd2e49441632d3c4e to your computer and use it in GitHub Desktop.
Gulp SASS Watcher Tasks With Theme Support
/*
* 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 );
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment