使用gulp将bootstrap.less文件编译为主bootstrap.css?

我真的很喜欢gulpjs,它是我选择的任务管理器,但我希望我几个月前了解任务管理器并加入gruntjs,主要是为了获得支持。 对于gulpjs来说,很难找到有关特定事物的信息。

我的问题是如何设置我的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
,以便可以对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'));
});

运行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
后,出现以下错误。


错误:EEXIST,mkdir'C:\ wamp \ www \ myproj \ source \ css \ bootstrap.css'

我认为我的sass任务代码设置不正确,我是gulp noobie,但是我尝试了多种组合,是的,我确实使用了“无gulp”文档中的示例,我使用的代码最简洁明了 削减我想要完成的代码。

编辑:我在Google上为此找到了一些很好的关键字,我发现了一些与此相关的最新文章,这是一个以无Gulp的维护文件夹结构启动Gulp似乎没有一个好答案,需要阅读。

另外:使用文档中的代码时,我忘了,我收到alert.less的错误

gulp.task('less', function () {
  gulp.src('./source/less/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./source/css'));
});

错误


抛出 //管道中未处理的流错误。
^
[gulp]插件“ gulp-less”中的错误:文件C:\ wamp \ www \ myproj \ source \ less \ alerts.less行中未定义变量@ alert-padding没有。 10

即使删除该行,它也一直在寻找新的错误。

编辑:文档确实会说以下内容,但对我而言这没有意义,是否表示应该有错误,如果这样会造成混淆,请尝试按照他们提供的指南进行操作。

错误处理

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

Michael Joseph Aubry asked 2020-08-01T00:12:50Z
6个解决方案
44 votes

我在尝试编译Bootstrap CSS时遇到了同样的问题。 我的简化解决方案最终看起来像:

// Compiles LESS > CSS 
gulp.task('build-less', function(){
    return gulp.src('styles.less')
        .pipe(less())
        .pipe(gulp.dest('./source/css'));
});

我的styles.less文件包括导入到styles.less的文件。我注意到,如果在gulp.src()路径中包含较少的引导文件,则会出错。

我的styles.less

@import "../lib/bootstrap/less/bootstrap.less";
@body-bg:     red; // test background color
Tucker answered 2020-08-01T00:27:33Z
6 votes

我成功了,我不知道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));
});
Michael Joseph Aubry answered 2020-08-01T00:27:53Z
6 votes

gulp less插件简单地将less转换为css。在Bootstrap中,索引少的文件是Bootstrap.less,它依次导入所有其他与引导程序相关的less文件。 因此,您所需要做的就是采购Bootstrap.less。 如果您想要自己的变量集,只需创建另一个较少的文件(my-custom-bs.less),然后在Bootstrap.less like之后(假设所有较少引导程序的文件都位于名为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'));
});
abhisekpaul answered 2020-08-01T00:28:19Z
1 votes

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

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

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

然后,如果我打算修改单个包含,则可以选择替换单个包含:

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

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

对于那些喜欢sass / scss的人的另一个提示。 如果您转换为CSS,然后使用以下指南针插件将其合并,则可以合并来自较少来源的引导程序:

[HTTPS://GitHub.com/Chris EPP Stein/sass-CSS-importer]

Henry answered 2020-08-01T00:29:02Z
1 votes

您不想指定较少的文件集作为源。 仅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'));
});
Robert Christian answered 2020-08-01T00:29:22Z
0 votes

以下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相同的方式导入每个单独的模块。

例如 警报

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

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

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

svnm answered 2020-08-01T00:29:56Z
translate from https://stackoverflow.com:/questions/21994582/using-gulp-to-compile-bootstrap-less-files-into-main-bootstrap-css