С помощью gulp для компиляции файлов bootstrap.less в основной файл bootstrap.css?

Мне действительно нравится gulpjs, это был мой менеджер задач по выбору, но я хотел бы знать о менеджерах задач несколько месяцев назад и попал в gruntjs, главным образом для поддержки. Для gulpjs трудно найти информацию о конкретных вещах.

Мой вопрос заключается в том, как настроить my gulpfile.js, чтобы я мог редактировать файлы bootstrap.less, а именно variables.less. Я установил " gulp-less" и реализовал его, как показано ниже.

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

Я получил ошибку ниже после запуска gulp less.

events.js:72 throw er; // Unhandled 'error' event ^ Error: EEXIST, mkdir 'C:\wamp\www\myproj\source\css\bootstrap.css'

Я не думаю, что мой код sass task setup правильно, я gulp noobie, но я попробовал несколько комбинаций, и да, я использовал пример из gulp-less", код, который я использовал, был самым кратким четким кодом, который я хочу выполнить.

Изменить: Я нашел хорошие слова для этого в google. Я нашел несколько недавних сообщений об этом, вот один Запуск gulp с Gulp без поддержки структуры папок не похоже, что есть хороший ответ, который нужно читать.

Дополнительно: Я забыл при использовании кода из документов, я получаю сообщение об ошибке с alerts.less

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

Ошибка

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

Даже когда я удаляю эту строку, он просто продолжает находить новые ошибки.

Изменить: Документы говорят, что следующее, но это не имеет для меня смысла, говорит ли он, что должна быть ошибка, если это так запутанно, я буду стараться следовать руководству, предоставлять.

Обработка ошибок

По умолчанию задача gulp завершится с ошибкой, и все потоки будут остановлены при возникновении ошибки. Чтобы изменить это поведение, ознакомьтесь с документацией по обработке ошибок здесь.

Ответ 1

У меня были те же проблемы, которые пытались скомпилировать 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. Я заметил, что если файлы bootstrap less были включены в путь gulp.src(), это означало бы ошибки.

Мой styles.less:

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

Ответ 2

Я получил его на работу, я не знал, что 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));
});

Ответ 3

gulp меньше плагина просто преобразует меньше в 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'));
});

Ответ 4

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

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

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

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

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

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

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

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

Ответ 5

Вы не хотите указывать набор меньших файлов в качестве источника. Только 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'));
});

Ответ 6

Следующий 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']);

Вы также можете скомпилировать каждый модуль/компонент начальной загрузки отдельно, просто разобрав каждый отдельный файл по отдельности. Или вы можете импортировать каждый отдельный модуль так же, как это делает 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, где каждый модуль начальной загрузки может быть импортирован отдельно в компоненты.