43

我真的很喜欢 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-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

即使我删除了该行，它仍然会不断发现新的错误。

编辑：文档确实说，以下但对我没有意义，是说应该有错误，如果这样令人困惑，我会尝试按照他们提供的指南进行操作。

错误处理

默认情况下，gulp 任务将失败，并且当发生错误时所有流都将停止。要更改此行为，请查看此处的错误处理文档

4

6 回答 6

44

我在尝试编译 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()路径中包含引导较少的文件，则会出错。

我的styles.less：

@import "../lib/bootstrap/less/bootstrap.less";
@body-bg:     red; // test background color
于 2014-02-24T17:51:09.660 回答
6

我让它工作，我不知道 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));
});
于 2014-02-24T17:54:29.417 回答
6

gulp less 插件只是将 less 转换为 css。在 Bootstrap 中，索引更少的文件是 Bootstrap.less，它依次导入所有其他与引导相关的更少文件。因此，您只需要获取 Bootstrap.less 即可。如果您想要自己的一组变量，只需创建另一个 less 文件（my-custom-bs.less）并在 Bootstrap.less 之后导入您的变量 less 文件（假设所有 bootstrap 文件都在一个名为 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'));
});
于 2015-02-04T11:26:32.983 回答
1

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

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

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

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

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

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

给那些喜欢 sass/scss 的人的另一个提示。如果您转换为 css，然后使用此指南针插件将其包含在内，则可以结合较少来源的引导程序：

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

于 2015-04-21T20:28:02.940 回答
1

您不想将较少的文件集指定为源。只有 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'));
});
于 2015-12-26T22:15:51.463 回答
0

以下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.css 一样导入每个单独的模块。

例如警报

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

于 2016-02-05T13:57:25.277 回答