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 タスク コードが適切にセットアップされているとは思わない。私が達成したいことのコードをカットします。

編集： Googleでこれに適したキーワードをいくつか見つけています。これに関する最近の投稿をいくつか見つけました。ここに1つがあります。Gulpを使用せずに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 に答える
1

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

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

次に、含める必要のないブートストラップの部分をコメントアウトできます。そこにはたくさんあり、通常はすべてを必要とするわけではありません。

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

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

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

sass/scss を好む人のためのもう 1 つのヒント。css に変換してから、このコンパス プラグインを使用して含めると、より少ないソースからのブートストラップを組み合わせることができます。

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

于 2015-04-21T20:28:02.940 に答える