Compile Less with Gulp - include variables - wordpress

Question

im working on a wordpress theme with less and gulp. Since i need to adjust some default paths and values for bootstrap + fontaweseome i have a less file with my custom vars (overwrite.less). but it doesnt affect the variables at all.
Less files get injected via mainBowerFiles, the docs say less vars support lazy load. (http://lesscss.org/features/#variables-feature-lazy-loading)
files get cached to speed up the build ( < 10 ms) but even without - no effect.
gulpfile.js:
'use strict';
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
var util = require('gulp-util');
var sourceMaps = require('gulp-sourcemaps');
var del = require('del');
var cache = require('gulp-cached');
var remember = require('gulp-remember');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var mainBowerFiles = require('main-bower-files');
var paths = {
target: '../vagrant/www/wordpress/wp-content/themes/themename',
bowerJs: mainBowerFiles('**/*.js'),
bowerLess: mainBowerFiles('**/*.less'),
lessFiles: ['overwrite.less','less/**.less'],
jsFiles: ['js/**.js']
};
var allLess = paths.bowerLess.concat(paths.lessFiles);
var allJs = paths.bowerJs.concat(paths.jsFiles);
function compileLess() {
var s = gulp.src(allLess);
s = s.pipe(sourceMaps.init());
s = s.pipe(cache('less'));
s = s.pipe(less());
s = s.pipe(remember('less'));
s = s.pipe(minifyCss());
s = s.pipe(concat('style.css'));
s = s.pipe(sourceMaps.write('maps/'));
return s.pipe(gulp.dest(paths.target));
}
function compileJs() {
var s = gulp.src(allJs);
s = s.pipe(sourceMaps.init());
s = s.pipe(cache('js'));
s = s.pipe(uglify());
s = s.pipe(remember('js'));
s = s.pipe(concat('app.js'));
s = s.pipe(sourceMaps.write('maps/'));
return s.pipe(gulp.dest(paths.target));
}
gulp.task('move', function() {
var filesToMove = ['./*.php', './assets/**', 'bower_components/**', './partial/**'];
gulp.src(filesToMove, { base: './' })
.pipe(gulp.dest('../vagrant/www/wordpress/wp-content/themes/codecampus')).once('end', function () {
browserSync.reload();
});
});
gulp.task('browser-sync', function() {
browserSync.init([], {
proxy: "http://vccw.dev/"
});
});
gulp.task('watch', function () {
gulp.watch('less/**/*.less', ['less']);
gulp.watch('js/**/*.js', ['js']);
gulp.watch(['./*.php', './assets/**', './partial/**'], ['move'])
});
gulp.task('less', function () {
util.log('Compile less ...');
browserSync.reload();
return compileLess();
});
gulp.task('js', function () {
util.log('Compile js ...');
browserSync.reload();
return compileJs();
});
gulp.task('clean', function (cb) {
util.log('Delete old less ...');
del([paths.target + '**/*'], {force: true}, cb);
});
//define tasks
gulp.task('default', [ 'clean', 'less', 'js' , 'move', 'watch', 'browser-sync'], function () {
return util.log('Gulp is running!');
});

Answer 1

Solution 1:
Splitting up the bower-less-files plus overwrite and your custom styles. so that you have 2 less tasks.
Solution 2:
Keep anything in one Task and inject modifyVars into your less task
s = s.pipe(less({
modifyVars: {
"fa-font-path" : '"../custom/path/"',
...
}
}));