Gulp less不处理包括正确的，包含的变量未定义

Question

我使用less和Grunt，并且正在转移到吞噬。

我的作品较少。当我运行时：

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

当我运行一饮而尽，我得到：

~/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; 
} 

• 为什么不吞下拿起我的包括？指定较少的'路径'选项应该使其工作，但它没有解决它。
• 什么是调试这个好方法？例如，我没有行号。
• 有没有一种方法可以使吞咽工作？

Answer 1

的差异什么我编译：

• 当我跑lessc myapp.less，我编译少主文件，它的依赖
• 当我使用上述gulpfile跑gulp，我单独编译每个较少的文件，因为gulp.src是*.less而不是myapp.less。由于这些较少的文件只能从主要较少的文件加载，因此它们没有@import它们依赖的东西（因为myapp.less依赖于它们）。例如，在每个文件中导入'theme.less'没有意义，而不是仅仅在myapp.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'); 
    }); 
}); 

编辑：见下文@noducks回答与最新一饮而尽工作的改进版本。

Answer 2

注意到几个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']); 

Answer 3

这是我的工作版本，使用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()); 
    })); 
}); 

Answer 4

另一个原因可能是，你在你的main.less使用@import (inline)，这将导致无法处理导入的文件。

请参阅http://lesscss.org/features/#import-options