使用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新手，但我尝试了多种组合。是的，我确实使用了“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任务将失败并且所有流都将停止。要更改此行为，请查看此处的错误处理文档。

- Michael Joseph Aubry

---

你的错误提示输出已经存在。我认为你只指定了目录而没有指定文件名。尝试将dest更改为./source/css。 - Mark Meyer

是的，我在尝试时做过那个，但我认为那不起作用，让我再试一次，使用来自文档的代码。这会为我编译一个全新的引导文件，对吧？ - Michael Joseph Aubry

哦，是的，我忘了提到在我开始折腾之前遇到的第一个问题。现在更新了OP！好的，已经更新了，在第10行有一个关于alerts.less的问题，但我认为我不应该编辑那一行。 - Michael Joseph Aubry

即使我删除了那行代码，它仍然不断发现新的错误。 - Michael Joseph Aubry

通过将gulp.src指向less目录来解决问题，该目录包含所有自定义的less文件以及带有bootstrap导入和bootstrap less目录的bootstrap-styles.less，而不是在less目录中递归查找所有文件。使用less / ** / * .less - br3w5

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

我的styles.less文件：

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

- Tucker

---

我刚在你发布帖子的同时让它工作了，太棒了！ - Michael Joseph Aubry

我必须给你绿色的勾选，但我的答案是对我有效的。谢谢！希望这能帮助其他人。加油 gulpjs！ - Michael Joseph Aubry

Answer 2

gulp less插件可以简单地将less转换为css。 在Bootstrap中，索引less文件是Bootstrap.less，它会导入所有其他与Bootstrap相关的less文件。因此，您只需要引用Bootstrap.less即可。如果您想要自己的变量集，请创建另一个less文件（my-custom-bs.less），并在Bootstrap.less之后导入您的变量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'));
});

- abhisekpaul

Answer 3

我搞定了，原来需要使用bootstrap.less而不是sourceLess，这才是主要的问题。

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

- Michael Joseph Aubry

---

这是有道理的，bootstrap.less 包含了其余的 .less 文件（除了变量文件）。 - basickarl

bootstrap.less 包含 variables.less - 这是第一行。 - Henry

Answer 4

您不需要指定一组less文件作为源。只需要选择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'));
});

- Robert Christian

Answer 5

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

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

我可以注释掉不需要包含的Bootstrap部分 - Bootstrap有很多内容，通常不需要全部使用。

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

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

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

对于那些喜欢sass/scss的人，另一个提示是：如果你将其转换为css并使用这个compass插件进行包含，就可以从less源中合并bootstrap。

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

- Henry

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模块/组件。或者，您可以以与bootstrap.css相同的方式导入每个单独的模块。

例如：alerts

@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模块可以单独导入到组件中。

- svnm