I really do like gulpjs it was my task manager of choice, but I kind of wish I knew about task managers a few months back and got into gruntjs, mainly for the support. For gulpjs its hard to find information on specific things.
My question is how do I setup my gulpfile.js so that I can make edits to bootstrap.less files specifically the variables.less. I did install "gulp-less" , and implemented it like below.
var less = require('gulp-less'),
path = require('path');
gulp.task('less', function () {
gulp.src('./source/less/variables.less')
.pipe(less())
.pipe(gulp.dest('./source/css/bootstrap.css'));
});
I get the error below after running gulp less.
events.js:72
throw er; // Unhandled 'error' event
^
Error: EEXIST, mkdir 'C:\wamp\www\myproj\source\css\bootstrap.css'
I don't think my sass task code is setup properly, I am a gulp noobie but I have tried multiple combinations, and yes I did use the example from the "gulp-less" documentation, the code I used was the most concise clear cut code on what I want to accomplish.
Edit: I am finding some good keywords for this on google I found a few recent posts about this, here is one Starting Gulp with Gulp-less maintain folder structure doesn't seem like there is a good answer ill have to read up.
Additional: I forgot when using the code from the docs, I get an error with alerts.less
gulp.task('less', function () {
gulp.src('./source/less/*.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./source/css'));
});
Error
stream.js:94
throw er; // Unhandled stream error in pipe.
^
[gulp] Error in plugin 'gulp-less': variable @alert-padding is undefined in file C:\wamp\www\myproj\source\less\alerts.less line
no. 10
Even when I remove that line, it just keeps finding new errors.
Edit: The docs do say, the following but that doesnt make sense to me, is it saying that there is supposed to be an error, if so thats confusing, Ill try following the guide they provide.
Error handling
By default, a gulp task will fail and all streams will halt when an error happens. To change this behavior check out the error handling documentation here
I had the same issues trying to compile the Bootstrap CSS. My simplified solution ended up looking like:
// Compiles LESS > CSS
gulp.task('build-less', function(){
return gulp.src('styles.less')
.pipe(less())
.pipe(gulp.dest('./source/css'));
});
and my styles.less file included the import to the bootstrap.less. I noticed that if the bootstrap less files were included in the gulp.src() path it would errors.
My styles.less:
@import "../lib/bootstrap/less/bootstrap.less";
@body-bg: red; // test background color