Another experiment with Gulp.js, but this one leaves control to the developer. I don't have exec() right yet (not synchronous!) Seems to be in a more recent NodeJS that I am running.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Usage: | |
// grunt deploy - invokes magento dev:source-theme:deploy for all themes. | |
// grunt less - runs less over all themes. | |
// grunt watch - watches for file changes with livereload. | |
// =========================== Configuration =========================== | |
// The default Less processing pipeline. | |
function lessPipeline(srcLessFile, destDir) { | |
return function() { | |
return gulp.src(srcLessFile) | |
.pipe(less()) | |
.pipe(sourcemaps.write()) | |
.pipe(livereload()) | |
.pipe(gulp.dest(destDir)); | |
}; | |
} | |
// Areas, themes, locales, CSS to genernate, and files to watch. | |
var config = { | |
'frontend': { // Area | |
'Magento/blank': { // Theme | |
'en_US': { // Locale comma list | |
} | |
}, | |
'Magento/luma': { // Theme | |
'en_US,en_AU': { // Locale comma list | |
//'css/kangaroo': { // Target CSS file | |
//'watch': ['**/*.less'], | |
//'pipeline': lessPipeline | |
//} | |
} | |
} | |
} | |
}; | |
// =========================== End =========================== | |
// Note: You should need to change the following - it is driven from | |
// configuration above. | |
// Include gulp | |
var gulp = require('gulp'); | |
// Include plugins | |
var jshint = require('gulp-jshint'); | |
var less = require('gulp-less'); | |
var concat = require('gulp-concat'); | |
var uglify = require('gulp-uglify'); | |
var rename = require('gulp-rename'); | |
var gutil = require('gulp-util'); | |
var livereload = require('gulp-livereload'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
// Include child process invocation support | |
var exec = require('child_process').exec; | |
var sys = require('sys'); | |
var util = require('util'); | |
// Helper function for reporting output of child processes. | |
function logger(error, stdout, stderr) { | |
sys.print(stdout); | |
sys.print(stderr); | |
if (error !== null) { | |
console.log('exec error: ' + error); | |
} | |
} | |
function shell(cmd) { | |
console.log(cmd + "\n"); | |
var log = exec(cmd, logger); | |
} | |
// Fill in the standard Magento files. You can override these defaults | |
// by listing them with 'null' as the value. | |
for (var area in config) { | |
for (var theme in config[area]) { | |
// Add in missing standard Magento files. | |
for (var locale in config[area][theme]) { | |
var obj = config[area][theme][locale]; | |
// Add rules for stanard Magento files. | |
var std = ['css/styles-l', 'css/styles-m', 'css/email', 'css/print']; | |
for (var i = 0; i < std.length; i++) { | |
css = std[i]; | |
if (obj.hasOwnProperty(css)) { | |
// 'null' in config means we really don't want it. | |
if (obj[css] == null) { | |
delete obj[css]; | |
} | |
} else { | |
// Add in default rule for Magento files. | |
obj[css] = { | |
'watch': ['**/_*.less', css + '.less'], | |
'pipeline': lessPipeline | |
}; | |
} | |
} | |
} | |
// Now expand any comma list of locale names. | |
for (var localeList in config[area][theme]) { | |
var obj = config[area][theme][localeList]; | |
delete config[area][theme][localeList]; | |
var locales = localeList.split(','); | |
for (var i = 0; i < locales.length; i++) { | |
config[area][theme][locales[i]] = obj; | |
} | |
} | |
} | |
} | |
// Create rules per theme/locale/isCustom | |
// (less-<area>-<theme>-<locale>-<css>). | |
var lessTargets = []; | |
for (var area in config) { | |
for (var theme in config[area]) { | |
for (var locale in config[area][theme]) { | |
for (var css in config[area][theme][locale]) { | |
var target = 'less-' + area + '-' + theme + '-' + locale + '-' + css; | |
lessTargets.push(target); | |
var pipeline = config[area][theme][locale][css]['pipeline']; | |
var baseDir = 'pub/static/' + area + '/' + theme + '/' + locale; | |
var srcFile = baseDir + '/' + css + '.less'; | |
var cssDir = ''; | |
if (css.lastIndexOf('/') >= 0) { | |
cssDir = css.substr(0, css.lastIndexOf('/')); | |
} | |
var destDir = baseDir + cssDir; | |
gulp.task(target, pipeline(srcFile, destDir)); | |
} | |
} | |
} | |
} | |
// Make 'less' target depends on all theme/locale variations. | |
gulp.task('less', lessTargets); | |
// Watch every watch pattern and trigger recompilation as required. | |
gulp.task('watch', function() { | |
livereload.listen(); | |
for (var area in config) { | |
for (var theme in config[area]) { | |
for (var locale in config[area][theme]) { | |
for (var css in config[area][theme][locale]) { | |
var watches = config[area][theme][locale][css]['watch']; | |
var baseDir = 'pub/static/' + area + '/' + theme + '/' + locale; | |
var target = 'less-' + area + '-' + theme + '-' + locale + '-' + css; | |
for (var i = 0; i < watches.length; i++) { | |
var watch = watches[i]; | |
gulp.watch(baseDir + '/' + watch, [target]); | |
console.log('WATCH: ' + baseDir + '/' + watch + '\n'); | |
console.log('TARGET: ' + target + '\n'); | |
} | |
} | |
} | |
} | |
} | |
}); | |
// Run Magento deploy command on every theme and language code. | |
gulp.task('deploy', function() { | |
for (var area in config) { | |
for (var theme in config[area]) { | |
var rmCmd = 'rm -rf pub/static/' + area + '/' + theme; | |
shell(rmCmd); | |
for (var locale in config[area][theme]) { | |
var files = Object.keys(config[area][theme][locale]); | |
var deployCmd = 'magento dev:source-theme:deploy' | |
+ ' --type=less' | |
+ ' --area=' + area | |
+ ' --theme=' + theme | |
+ ' --locale=' + locale | |
+ ' ' + files.join(' '); | |
shell(deployCmd); | |
} | |
} | |
} | |
}); | |
// Default Task | |
gulp.task('default', ['less', 'watch']); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment