Gulp weniger nicht Handhabung beinhaltet richtig, inkl. Variablen nicht definiert

Question

Ich benutze weniger und Grunt, und bin zum Schluck bewegen.

Mein weniger funktioniert. Wenn ich renne:

lessc public/less/myapp.less 

Ich bekomme funktionierende Ausgabe ohne Fehler. Alle meine weniger, einschließlich beinhaltet, ist in der Öffentlichkeit/weniger, BTW. Hier ist meine 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'); 
    }); 
}); 

Als ich schluck laufen, erhalte ich:

~/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 definiert ist, in einer Datei zu Beginn der myapp.less importiert.

@import "./colors.less"; 
body { 
    background-color: @brightblue; 
} 

• Warum schlucken ist nicht richtig erfasst meine enthält? Wenn Sie die Option "Pfade" für weniger angeben, sollte dies funktionieren, es wird jedoch nicht repariert.
• Was ist eine gute Möglichkeit, dies zu debuggen? Ich habe zum Beispiel keine Zeilennummer.
• Gibt es eine Möglichkeit, Schluck zu arbeiten?

Answer 1

Der Unterschied war was ich kompilieren:

• Als ich lessc myapp.less lief, war ich die Haupt weniger Datei zu kompilieren und es ist Abhängigkeiten
• Als ich gulp lief über die gulpfile verwenden, I kompilierte jede Datei weniger einzeln, weil gulp.src war *.less nicht myapp.less. Da diese weniger Dateien immer nur aus der Hauptdatei less geladen werden, hatten sie keine @imports für die Dinge, auf die sie angewiesen sind (weil myapp.less davon abhängt). Es ist beispielsweise nicht sinnvoll, "theme.less" in jede einzelne Datei zu importieren, anstatt sie zuerst in myapp.less zu importieren.

Hier ist die Arbeitsversion:

// 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'); 
    }); 
}); 

Edit: siehe @noducks unten für eine verbesserte Version beantworten, die mit dem neuesten schluck arbeitet.

Answer 2

Bemerkte, dass ein paar gulp.run Verwarnungswarnungen dort auftauchten. Dies behebt sie und fügt einige Fehlerbehandlung hinzu. Ich habe eine etwas andere Verzeichnisstruktur.

'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']); 

Answer 3

Hier ist meine Arbeitsversion, mit gulp-watch und gulp-connect für Live-reload.

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()); 
    })); 
}); 

Answer 4

Eine andere Ursache könnte sein, dass Sie @import (inline) in Ihrem main.less verwenden sind, die die importierte Datei nicht verarbeitet verursacht werden.

Siehe http://lesscss.org/features/#import-options