Gulp тянет все файлы в порядке их расположения в папке (по алфавиту), где одним из первых идет файл alerts.less, в нем собственно и находится переменная @alert-padding
. Однако все переменные объявляются в variables.less. Одним вариантом будет передача в Gulp одного файла, в котором явно указан порядок включения компонентов - собственно так делает сам Bootstrap - файл bootstrap.less из репозитория Bootstrap:
// bootstrap.less - фрагменты файла
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// ...
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
// ...
Т.е. чтобы просто врчную собрать Bootstrap, достаточно в Gulp передать сам файл bootstrap.less:
gulp.task('bootstrap', function(){
gulp.src('./bower_components/bootstrap/less/bootstrap.less')
.pipe(less())
.pipe(gulp.dest('./'));
});
Либо напрямую подключить bootstrap.less в ваши .less файлы.
Еще одним вариантом будет указание правильно порядка файлов прямо в Gulp:
gulp.task('bootstrap', function(){
gulp.src([
'./bower_components/bootstrap/less/variables.less',
'./bower_components/bootstrap/less/mixins.less',
// ...
'./bower_components/bootstrap/less/alerts.less',
'./bower_components/bootstrap/less/progress-bars.less',
'./bower_components/bootstrap/less/media.less',
])
.pipe(less())
.pipe(gulp.dest('./'));
});