gulp-less produces blank css file when @import exists

Question

I'm trying to use gulp to compile a less file into css. I have this working on another project but not on this one.

the task in my gulpfile.js looks like this:

gulpfile.js

var sourceLess = './app/assets/stylesheets/less';
var sourceJs = './app/assets/javascripts';

var targetCss = './public/css2';
var targetJs = './public/js2';    

// Compile my-bootstrap-theme
gulp.task('css', function() {

gulp.src(sourceLess + '/custom/edgc-styles.less')
    .pipe(less())
    .pipe(gulp.dest(targetCss))
    .pipe(minifyCss())
    .pipe(gulp.dest(targetCss));
});

My edgc-styles.less file includes an @import which in turn includes an @import as follows:

//my custom stylsheet

@import "../bootstrap/bootstrap.less";
@import "custom-variables.less";
@import "custom-fonts.less";

and in the bootstrap.less file it starts like this:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

In my output all I get is the comment at the start of the bootstrap.less file and blank after.

I can't work out how to log for errors in gulp (on a windows machine) to see what's going on but assume it's failing on trying to import variables.less. this is a valid file and exists in the same directory as bootstrap.less

What directive am I missing in the gulp configuration? I'm new to gulp so not sure of all it's features and how to traverse directories properly.

Any help appreciated

Answer 1

it appears that you are trying to generate both a readable CSS and a minified version of the same CSS file, at the same time, with the same filename, in the same location. This will cause the output by the two gulp.dest functions to interfere with each other and their outputs to be useless. Try placing them into different locations or rename the minified version, the gulp-rename package can help you with altering the name of the minified version in stream.