Gulp less 未正确处理包含未定义的包含变量答案

【问题标题】：Gulp less not handling includes properly, included variables not definedGulp less 未正确处理包含未定义的包含变量
【发布时间】：2014-01-28 08:16:22
【问题描述】：

我正在使用 less 和 Grunt，并且正在转向 gulp。

我的少工作。当我跑步时：

lessc public/less/myapp.less

我得到了没有错误的工作输出。 我所有的 less，包括 include，都在 public/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 工作？

【问题讨论】：

标签： javascript css less gulp gulp-less

【解决方案1】：

区别在于我正在编译什么：

当我运行lessc myapp.less 时，我正在编译主less 文件及其依赖项
当我使用上面的 gulpfile 运行 gulp 时，我正在单独编译每个 less 文件，因为 gulp.src 是 *.less 而不是 myapp.less。由于这些 less 文件仅从主 less 文件加载，因此它们没有 @imports 用于它们所依赖的东西（因为 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 回答，了解适用于最新 gulp 的改进版本。

【讨论】：

谢谢。我遇到了同样的问题。我明白我做错了什么，但我不确定如何正确编排它。 +1

【解决方案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']);

【讨论】：

【解决方案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());  
    }));
});

【讨论】：

【解决方案4】：

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

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

【讨论】：