Using gulp to compile bootstrap.less files into main bootstrap.css?

Question

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

Emplacement

Your error says that the output exists. I don't think you specify the filename just the directory. Try changing the dest to ./source/css – Gunthar

Yeah I did that when experimenting, and I don't think that worked, let me try it again with the code straight from the docs. This would compile a whole new bootstrap file for me right? – Emplacement

Oh yeah I forgot to mention the first issue I was getting before I started fiddling around, updating OP now! Okay updated, there is a problem with alerts.less on line 10, I don't think I should have to edit that line though. – Emplacement

Even when I remove that line, it just keeps finding new errors. – Emplacement

@MichaelJosephAubry did the accepted solution solve the alert-padding error? i'm still getting that error after following the answers below – Malediction

...looks like alerts.less is getting compiled before variables.less – Malediction

aha fixed it by pointing gulp.src to the less dir which contains all custom less files plus bootstrap-styles.less with bootstrap import and the bootstrap less dir, rather than recursively finding all files within the less dir with less/**/*.less – Malediction

You don't want to specify the set of less files as the source. Only bootstrap.less, which imports the others. (example in answer below) – Bedside

Answer 1

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

Saltish

I just got it to work the same time you posted, awesome! – Emplacement

I gotta give you the green check though. But my answer is what is working for me. Thanks! Hope this helps others. Go gulpjs – Emplacement

Answer 2

I got it to work, I didn't know the sourceLess needed to be bootstrap.less, that was mainly the issue.

var sourceLess = './source/less';
var targetCss = './source/css';

// Compile Our Less
gulp.task('less', function() {
    return gulp.src([sourceLess + '/bootstrap.less'])
        .pipe(less())
        .pipe(gulp.dest(targetCss));
});

Emplacement

Well it does make sense, bootstrap.less includes the rest of the .less files (except variables). – Callihan

bootstrap.less does include variables.less - its the first line. – Linares

Answer 3

gulp less plugin simply converts the less to css. In Bootstrap, index less file is the Bootstrap.less which in turns imports all the other bootstrap related less files. So all you need is to source the Bootstrap.less. If you want your own set of variables, just create another less file(my-custom-bs.less) and import your variable less file after the Bootstrap.less like(assuming all the bootstrap less files are in a folder called bootstrap):

@import "bootstrap/less/bootstrap.less";
@import "my-custom-bs-variables.less";

Then in your gulp task, just source this file only:

gulp.task('build-less', function(){
return gulp.src('my-custom-bs.less')
    .pipe(less())
    .pipe(gulp.dest('./source/css'));
});

Hyperbola

Answer 4

My solution to this problem is to create my own copy of bootstrap.less outside of the vendors folder and change all of the import paths:

@import "../vendor/bootstrap/less/variables.less";

I can then comment out parts of bootstrap that I don't need to include - there's a lot there and you usually don't need all of it.

Then I can opt to replace individual includes if I plan to modify them:

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

This way there's no need to modify the vendors folder and I can strip out or re-add components at will, change the default fonts, default colors etc...

Another tip for those who prefer sass/scss. It's possible to combine bootstrap from less source if you convert to css and then include it using this compass plugin:

https://github.com/chriseppstein/sass-css-importer

Linares

Answer 5

You don't want to specify the set of less files as the source. Only bootstrap.less, which imports the others.

gulp.task('less', function () {
    return gulp.src('./less/bootstrap.less')
        .pipe(less({
            paths: [ path.join(__dirname, 'less', 'includes') ]
        }))
        .pipe(gulp.dest('./ui/css'));
});

Bedside

Answer 6

The following gulpfile should work with the latest version of bootstrap and gulp.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var autoprefixer = require('autoprefixer');

gulp.task('css', function () {
    var processors = [
        autoprefixer
    ];
    return gulp.src('./node_modules/bootstrap/less/bootstrap.less')
        .pipe(less())
        .pipe(postcss(processors))
        .pipe(gulp.dest('./public/css'));
});

gulp.task('default', ['css']);

You can also compile each bootstrap module/component individually, just by parsing each less file individually. Or you can import each individual module in the same way the bootstrap.css does.

e.g. alerts

@import "../node_modules/bootstrap/less/variables.less";
@import "../node_modules/bootstrap/less/mixins.less";

@import "../node_modules/bootstrap/less/alerts.less";

I used this approach for a css module compatible version of bootstrap bootstrap-css where each bootstrap module can be imported individually into components.

Defeatist