Использование gulp для компиляции файлов bootstrap.less в основной bootstrap.css?

У меня были те же проблемы при попытке скомпилировать Bootstrap CSS. Мое упрощенное решение выглядело так:

// Compiles LESS > CSS 
gulp.task('build-less', function(){
    return gulp.src('styles.less')
        .pipe(less())
        .pipe(gulp.dest('./source/css'));
});

и мой файл styles.less включал импорт в файл bootstrap.less. Я заметил, что если в путь gulp.src() будут включены файлы без начальной загрузки, это приведет к ошибкам.

My styles.less:

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

Я заставил его работать, я не знал, что sourceLess должен быть bootstrap.less, в основном это было проблемой.

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

Плагин gulp less просто преобразует less в css. В Bootstrap файл без индекса — это Bootstrap.less, который, в свою очередь, импортирует все остальные файлы, связанные с начальной загрузкой. Так что все, что вам нужно, это получить Bootstrap.less. Если вам нужен собственный набор переменных, просто создайте еще один файл меньшего размера (my-custom-bs.less) и импортируйте файл меньшего числа переменных после того, как Bootstrap.less вроде (при условии, что все файлы меньшего размера начальной загрузки находятся в папке с именем bootstrap):

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

Затем в задаче gulp просто укажите исходный код только для этого файла:

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

Мое решение этой проблемы — создать собственную копию bootstrap.less за пределами папки поставщиков и изменить все пути импорта:

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

Затем я могу закомментировать части бутстрапа, которые мне не нужно включать — их много, и вам обычно не нужно все это.

Затем я могу заменить отдельные включения, если я планирую их изменить:

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

Таким образом, нет необходимости изменять папку поставщиков, и я могу удалить или повторно добавить компоненты по своему желанию, изменить шрифты по умолчанию, цвета по умолчанию и т. д.

Еще один совет для тех, кто предпочитает sass/scss. Можно комбинировать загрузку из меньшего источника, если вы конвертируете в css, а затем включаете его с помощью этого плагина компаса:

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

Вы не хотите указывать набор меньшего количества файлов в качестве источника. Только bootstrap.less, который импортирует остальные.

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

Следующий gulpfile должен работать с последней версией bootstrap и 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']);

Вы также можете скомпилировать каждый модуль/компонент начальной загрузки по отдельности, просто проанализировав каждый файл less по отдельности. Или вы можете импортировать каждый отдельный модуль так же, как это делает bootstrap.css.

например оповещения

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

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

Я использовал этот подход для совместимой с модулем css версии bootstrap bootstrap-css, где каждый модуль начальной загрузки может быть импортируются по отдельности в компоненты.