Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
// 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
You can’t perform that action at this time.