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”文档中的示例，我使用的代码是我想要完成的最简洁清晰的代码。

编辑：我在google上找到了一些好的关键字我发现了一些关于此的最新帖子，这里有一个Starting Gulp with Gulp-less maintain folder structure似乎没有一个好的答案生病了必须阅读。

其他：我在使用文档中的代码时忘记了，我收到了一条错误警告。

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

Answer 4

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

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

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

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

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

这种方式不需要修改供应商文件夹，我可以随意删除或重新添加组件，更改默认字体，默认颜色等...

那些喜欢sass / scss的人的另一个提示。如果你转换为css然后使用这个指南针插件包含它，可以组合来自较少来源的bootstrap：

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

您也可以单独编译每个引导程序模块/组件，只需单独解析每个较少的文件。或者您可以像bootstrap.css一样导入每个单独的模块。

e.g。的警报

@import "../node_modules/bootstrap/less/variables.less"; @import "../node_modules/bootstrap/less/mixins.less"; @import "../node_modules/bootstrap/less/alerts.less";

我将此方法用于引导程序bootstrap-css的css模块兼容版本，其中每个引导程序模块可以单独导入组件。

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

6 个答案: