使用gulp将bootstrap.less文件编译到主bootstrap.css中？
我真的很喜欢gulpjs这是我select的任务pipe理器，但是我希望几个月前我就知道任务pipe理器，并且主要是为了支持而进入gruntjs。 对于gulpjs很难find关于具体事物的信息。
我的问题是如何设置我的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任务代码是安装正确的，我是一口气noobie，但我已经尝试了多种组合，是的，我使用了“ 无 ”“文档的例子，我使用的代码是最简洁清晰削减我想要完成的代码。
编辑：我在谷歌上find一些关于这个好关键字我发现了一些最近的post关于这个，这里是一个开始与Gulp-less维护文件夹结构gulp似乎并不像有一个很好的答案，生病了必须阅读。
额外：我忘记了从文档中使用代码时，我得到一个与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
即使当我删除这条线，它只是不断发现新的错误。
编辑：文件确实说，下面，但是这并没有意义，是否说是应该有一个错误，如果这样做令人困惑，我会遵循他们提供的指导。
error handling
默认情况下，吞吐任务将失败，所有stream将在发生错误时停止。 要改变这种行为，请查看这里的error handling文档
我试图编译引导CSS有相同的问题。 我简化的解决scheme最终看起来像：
// Compiles LESS > CSS gulp.task('build-less', function(){ return gulp.src('styles.less') .pipe(less()) .pipe(gulp.dest('./source/css')); });
我的styles.less文件包括导入到bootstrap.less 。 我注意到，如果引导程序较less的文件包含在gulp.src()path中，它会出错。
我的styles.less ：
@import "../lib/bootstrap/less/bootstrap.less"; @body-bg: red; // test background color
我得到它的工作，我不知道来源无需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)); });
gulp less插件只是简单地转换成css。 在Bootstrap中，索引较less的文件是Bootstrap.less，它依次导入所有其他与Bootstrap相关的较less文件。 所以你所需要的就是引导Bootstrap.less。 如果你想要自己的一组variables，只需创build另一个较less的文件（my-custom-bs.less），并在Bootstrap.less之后导入你的variablesless的文件（假设所有的bootstrap less文件都在一个名为bootstrap的文件夹中）：
@import "bootstrap/less/bootstrap.less"; @import "my-custom-bs-variables.less";
然后在你的吞咽任务中，只需要input这个文件：
gulp.task('build-less', function(){ return gulp.src('my-custom-bs.less') .pipe(less()) .pipe(gulp.dest('./source/css')); });
我对这个问题的解决scheme是在vendor文件夹之外创build自己的bootstrap.less副本，并更改所有的导入path：
@import "../vendor/bootstrap/less/variables.less";
然后我可以评论一些我不需要包含的bootstrap部分 – 这里有很多，你通常不需要所有的部分。
那么我可以select更换个人包括，如果我打算修改它们：
@import "./custom-bootstrap/variables.less"; // etc...
这样就不需要修改供应商文件夹，我可以去除或重新添加组件，更改默认的字体，默认的颜色等…
对于那些喜欢sass / scss的人来说， 如果你转换成css然后用这个指南针插件包含它，那么可以将来自较less源的bootstrap结合起来：
您不想指定一组较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')); });
以下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']);
您也可以单独编译每个引导程序模块/组件，只需逐个parsing每个较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-css版本，其中每个引导程序模块可以单独导入组件。
