使用 gulp 将 bootstrap.less 文件编译成主 bootstrap.css？

Question

我真的很喜欢 gulpjs，它是我选择的任务管理器，但我有点希望几个月前我了解任务管理器并进入 gruntjs，主要是为了获得支持。对于 gulpjs 来说，很难找到有关特定事物的信息。

我的问题是如何设置我的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 任务代码设置不正确，我是一个 gulp noobie，但我尝试了多种组合，是的，我确实使用了“gulp-less”文档中的示例，我使用的代码是关于我想要完成的最简洁明了的代码。

编辑：我在谷歌上找到了一些很好的关键字我发现了一些关于这个的最近的帖子，这里是一个Starting Gulp with Gulp-less maintain folder structure 似乎没有一个好的答案，我不得不阅读。

附加：我忘记了使用文档中的代码时，出现 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 任务将失败，并且所有流将在发生错误时停止。要更改此行为，请查看此处的错误处理文档

Answer 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 的导入。我注意到，如果 gulp.src() 路径中包含 bootstrap less 文件，则会出错。

我的styles.less：

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

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

Answer 3

gulp less 插件只是将 less 转换为 css。 在 Bootstrap 中，索引更少的文件是 Bootstrap.less，它依次导入所有其他与引导相关的更少文件。因此，您只需要获取 Bootstrap.less 即可。如果您想要自己的一组变量，只需创建另一个 less 文件（my-custom-bs.less）并在 Bootstrap.less 之后导入您的变量 less 文件（假设所有 bootstrap 文件都在一个名为 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'));
});

Answer 4

我对这个问题的解决方案是在 vendor 文件夹之外创建我自己的 bootstrap.less 副本并更改所有导入路径：

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

然后我可以注释掉我不需要包含的引导程序部分 - 那里有很多，您通常不需要全部。

如果我打算修改单个包含，我可以选择替换它们：

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

这样就不需要修改vendors文件夹，我可以随意删除或重新添加组件，更改默认字体、默认颜色等...

给喜欢 sass/scss 的人的另一个提示。如果您转换为 css，然后使用此指南针插件将其包含在内，则可以结合较少来源的引导程序：

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

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

Answer 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']);

您还可以单独编译每个引导模块/组件，只需单独解析每个 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 版本，其中每个 bootstrap 模块都可以单独导入到组件中。