使用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 "文档中的示例,我使用的代码是最简洁明了的切断我想要完成的代码.

编辑:我在谷歌上发现了一些好的关键词我发现了一些关于这个的最近帖子,这里是一个开始Gulp与Gulp-less维护文件夹结构似乎没有一个好的答案生病必须阅读.

附加:我忘记了使用文档中的代码时,我收到了alert.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较少的文件,则会出错.

我的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相关的文件.所以你需要的只是获取Bootstrap.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'));
});