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

Question

I really like gulpjs, it was my choice task manager, but I wanted to know about task managers a few months ago and got into gruntjs, mainly for support. It's hard for gulpjs to find information about specific things.

My question is how to configure my gulpfile.js so that I can edit bootstrap.less files, namely variables.less . I installed " gulp-less " and implemented it as shown 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 got 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 setup code is correct, I’m gulp noobie, but I tried several combinations, and yes, I used the example from gulp-less ", the code I used was the shortest clear code that I want to execute .

Edit: I found good words for this on google. I found some recent posts about this, here is one Running gulp with Gulp without supporting the folder structure doesn't seem like there is a good answer to read.

Optional: I forgot when using the code from the documents, I get an error message 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')); }); 

Mistake

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 delete this line, it just keeps finding new errors.

Edit: Documents say the following, but it doesn’t make sense to me if he says there should be a mistake, if this is so confusing, I will try to follow the guidelines provided.

Error processing

By default, the gulp task will fail, and all threads will stop when an error occurs. To change this behavior, check out the error handling documentation here.

Answer 1

I had the same problems trying to compile Bootstrap CSS. My simplified solution looked like this:

 // 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 import into bootstrap.less . I noticed that if bootstrap less files were included in the gulp.src() path, that would mean errors.

My styles.less :

 @import "../lib/bootstrap/less/bootstrap.less"; @body-bg: red; // test background color 

Answer 2

I got it to work, I did not know that sourceLess should be bootstrap.less , which was basically a problem.

 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 smaller plugin just converts less to css. In Bootstrap, the index is smaller than the file - this is Bootstrap.less, which, in turn, imports all other files related to the download, smaller. So, all you need is the source of Bootstrap.less. If you want your own set of variables, just create even fewer files (my-custom-bs.less) and import a file with a smaller variable after Bootstrap.less (assuming all the files with the download are smaller in the bootstrap folder):

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

Then in your gulp task just send 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 the vendors folder and change all import paths:

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

Then I can comment on the parts of the bootstrap that I do not need to include - there are many, and you usually do not need all of this.

Then I can choose to replace individual inclusions if I plan to change them:

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

Thus, there is no need to change the suppliers folder, and I can remove or re-add components as I see fit, change the default fonts, default colors, etc.

One more tip for those who prefer sass / scss. You can combine bootstrap from a smaller source if you convert to css and then enable it using this compass plugin:

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

Answer 5

You do not want to specify a set of smaller files as the source. Only bootstrap.less, which imports the rest.

 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 boot module / component separately by simply parsing each individual file individually. Or you can import each individual module in the same way bootstrap.css does.

eg. 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 the CSS-compatible version of bootstrap bootstrap-css , where each bootstrap module can be imported separately into components.