web-dev-qa-db-ja.com

gulpを使用してbootstrap.lessファイルをメインbootstrap.cssにコンパイルしますか？

私はgulpjsが好きです。それは私の選択したタスクマネージャーでしたが、数か月前にタスクマネージャーについて知っていて、主にサポートのためにgruntjsに参加したかったのです。 gulpjsの場合、特定のものに関する情報を見つけるのは困難です。

私の質問は、bootstrap.lessファイル、特にgulpfile.jsを編集できるように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 "ドキュメント、コード私が使用したのは、達成したいことに関する最も簡潔で明確なコードでした。

編集：グーグルでこのためのいくつかの良いキーワードを見つけていますこれに関するいくつかの最近の投稿を見つけました、ここに1つあります GulpでGulpを開始-lessフォルダー構造の維持 読む必要のない良い答えがあるようには見えません。

追加：ドキュメントのコードを使用するときに忘れてしまったため、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タスクは失敗し、エラーが発生するとすべてのストリームが停止します。この動作を変更するには、エラー処理のドキュメントを確認してください

javascriptgulpgulp-less
43
Michael Joseph Aubry

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_へのインポートが含まれていました。 bootstrap=少ないファイルがgulp.src()パスに含まれている場合、エラーになります。

私の_styles.less_：

_@import "../lib/bootstrap/less/bootstrap.less";
@body-bg:     red; // test background color
_
44
Tucker

gulp lessプラグインは、単にlessをcssに変換します。 Bootstrapでは、インデックスレスファイルはBootstrap.lessであり、他のすべてのbootstrap=関連するより少ないファイルをインポートします。したがって、必要なのはBootstrap.lessをソースすることです。変数の場合、別のlessファイル（my-custom-bs.less）を作成し、Bootstrap.less likeの後に変数lessファイルをインポートします（すべてのbootstrap lessファイルがブートストラップ）：

@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'));
});
6
abhisekpaul

動作するようになりましたが、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));
});
6
Michael Joseph Aubry

この問題に対する私の解決策は、ベンダーフォルダーの外部にbootstrap.lessの独自のコピーを作成し、すべてのインポートパスを変更することです。

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

次に、bootstrapの一部をコメントアウトする必要があります。これは含める必要はありません-たくさんありますが、通常はすべてを必要としません。

次に、変更する予定がある場合は、個々のインクルードを置き換えることを選択できます。

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

この方法では、ベンダーフォルダーを変更する必要はありません。コンポーネントを自由に削除または再追加し、デフォルトのフォント、デフォルトの色などを変更できます。

Sass/scssを好む人のための別のヒント。 cssに変換してからこのコンパスプラグインを使用して含めると、少ないソースからbootstrapを組み合わせることも可能です。

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

1
Henry

少ないファイルのセットをソースとして指定する必要はありません。他をインポートする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'));
});
1
Robert Christian

次のgulpfileは、bootstrapの最新バージョンで動作するはずです。と一口。

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=モジュール/コンポーネントを個別にコンパイルすることもできます。各ファイルを個別に解析するだけです。または、bootstrap.cssと同じ方法で各モジュールをインポートすることもできます。

例えばアラート

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

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

bootstrap bootstrap-css のcssモジュール互換バージョンにこのアプローチを使用しました。各bootstrapモジュールは個別にコンポーネントにインポートできます。

0
svnm