javascript - 使用 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
^<br/>
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<br/>
throw er; // Unhandled stream error in pipe.<br/>
^<br/>
[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 的导入。我注意到如果 bootstrap less 文件包含在 gulp.src() 路径中，它会出错。

我的styles.less:

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