web-dev-qa-db-ja.com

Gulp lessが正しく処理されない、含まれる変数が定義されていない

LessとGruntを使用していますが、gulpに移行しています。

私の少ない作品。私が走ると：

lessc public/less/myapp.less

エラーなしで作業出力を取得します。 インクルードを含むすべての私の少ないものは公開されています/少ないです、ところで。ここに私のgulpfileがあります：

var gulp = require('gulp');
var prefixer = require('gulp-autoprefixer');
var less = require('gulp-less');

gulp.task('compileLess', function () {
  gulp
    .src('./public/less/*')
    .pipe(less({
      paths: ['./public/less'], // Search paths for imports
      filename: 'myapp.less'
    }))
    .pipe(gulp.dest('./public/css'));
});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('compileLess');

  // Watch files and run tasks if they change
  gulp.watch('./public/less/*.less', function(event) {
    gulp.run('less');
  });
});

Gulpを実行すると、次のようになります。

~/Documents/myapp: gulp
[gulp] Using file /Users/me/Documents/myapp/gulpfile.js
[gulp] Working directory changed to /Users/me/Documents/myapp
[gulp] Running 'default'...
[gulp] Running 'compileLess'...
[gulp] Finished 'compileLess' in 11 ms
[gulp] Finished 'default' in 41 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: variable @brightblue is undefined

@brightblueは、myapp.lessの最初にインポートされたファイルで定義されています。

@import "./colors.less";
body {
  background-color: @brightblue;
}
  • インクルードがgulpでピックアップされないのはなぜですか？ lessに 'paths'オプションを指定すると機能するはずですが、修正はしていません。
  • これをデバッグする良い方法は何ですか？たとえば、行番号はありません。
  • Gulpを機能させる方法はありますか？
javascriptcsslessgulpgulp-less
23
mikemaccana

違いはwhatでした：

  • 私が走ったときlessc myapp.less、メインの少ないファイルをコンパイルしていて、その依存関係です
  • 上記のgulpfileを使用してgulpを実行したとき、gulp.srcが*.lessないmyapp.less。これらのlessファイルはメインのlessファイルからのみロードされるため、依存するものに対して@importsがありませんでした（myapp.lessが依存するため）。たとえば、最初にmyapp.lessにインポートするだけでなく、個々のファイルごとに 'theme.less'をインポートしても意味がありません。

ここに作業バージョンがあります：

// Run 'gulp' to do the important stuff
var gulp = require('gulp');
var prefixer = require('gulp-autoprefixer');
var less = require('gulp-less');
var path = require('path');

gulp.task('less', function () {
  gulp
    .src('./public/less/myapp.less') // This was the line that needed fixing
    .pipe(less({
      paths: ['public/less']
    }))
    .pipe(prefixer('last 2 versions', 'ie 9'))
    .pipe(gulp.dest('./public/css'));
});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('less');

  // Watch files and run tasks if they change
  gulp.watch('./public/less/*.less', function(event) {
    gulp.run('less');
  });
});

編集：最新のgulpで動作する改良版については、以下の@noducksの回答を参照してください。

35
mikemaccana

いくつかのgulp.run非推奨の警告がポップアップ表示されていることに注意してください。これはそれらを修正し、いくつかのエラー処理を追加します。ディレクトリ構造が少し異なります。

    'use strict';

    var gulp = require('gulp');
    var prefixer = require('gulp-autoprefixer');
    var less = require('gulp-less');
    var gutil = require('gulp-util');
    var plumber = require('gulp-plumber');

    gulp.task('less', function() {
        gulp
            .src('./less/app.less')
        .pipe(plumber(function(error) {
            gutil.log(gutil.colors.red(error.message));
            gutil.beep();
            this.emit('end');
        }))
        .pipe(less())
        .pipe(prefixer('last 2 versions', 'ie 9'))
        .pipe(gulp.dest('./css'));
    });

    gulp.task('less:watch', function(){
        gulp.watch(['./less/*.less', './less/module/*.less'], ['less']);
    });

    gulp.task('default', ['less','less:watch']);
5
Sean McClory

これが私の実際のバージョンで、gulp-watchとgulp-connectをライブリロードに使用しています。

gulp.task('less:dev', function () {
    gulp
      .src('app/styles/**/*.less', {read: false})
      .pipe(watch(function () {
        return gulp
          .src('app/styles/main.less')
          .pipe(less())
          .pipe(gulp.dest('app/styles/'))
          .pipe(connect.reload());  
    }));
});
1
user2331095

別の原因として、_main.less_で@import (inline)を使用していることが考えられます。これにより、インポートされたファイルが処理されなくなります。

http://lesscss.org/features/#import-options を参照してください

0
Pierlo Upitup