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

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

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));
});

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'));
});

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

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'));
});

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.