Gulp较少不处理包括正确，包含的变量未定义 [英] Gulp less not handling includes properly, included variables not defined

问题描述

我使用较少，Grunt，我正在移动到gulp。

我的作品少。运行时：

  lessc public / less / myapp.less 
  

我得到没有错误的工作输出。 我所有的一切，包括包含，是在公共/较少，BTW。这是我的gulpfile：

  var gulp = require（'gulp'）; 
 var prefixer = require（'gulp-autoprefixer'）; 
 var lower = require（'gulp-less'）; 
 
 gulp.task（'compileLess'，function（）{
 gulp 
 .src（'./ public / less / *'）
 .pipe （{
 paths：['./public/less']，//搜索导入路径
 filename：'myapp.less'
}））
 .pipe .dest（'./ public / css'））; 
}）; 
 
 //默认任务（运行`gulp'时调用）
 gulp.task（'default'，function（）{
 gulp.run（'compileLess'） ; 
 
 //观察文件并运行任务（如果改变）
 gulp.watch（'./ public / less / *。less'，function（event）{
 gulp。 run（'less'）; 
}）; 
}）; 
  

当我运行gulp时，我得到：

 〜/ Documents / myapp：gulp 
 [gulp]使用文件/Users/me/Documents/myapp/gulpfile.js 
 [gulp]工作目录更改为/ users / me / Documents / myapp 
 [gulp]运行'default'... 
 [gulp]运行'compileLess'... 
 [gulp] 
 [gulp]完成'默认'在41 ms 
 
 stream.js：94 
 throw er; //管道中的未处理流错误。 
 ^ 
错误：变量@brightblue未定义
  

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

• 为什么gulp ？对于less指定paths选项应该使它工作，但它不是修复它。


• 有什么好的方法来调试这个？

是否有办法让gulp工作？

$

当我运行 lessc myapp.less 时，我正在编译主要的文件和它的依赖

• 当我运行 gulp 使用上面的gulpfile，我是单独编译每个更少的文件，因为gulp.src *。少不是 myapp.less 。因为这些较少的文件只能从主要的文件加载，他们没有@imports他们依赖的东西（因为myapp.less取决于它们）。例如，没有点导入，例如，theme.less在每个文件，而不是只是在myapp.less导入它。

这是工作版本：

  //运行'gulp'做重要的事情
 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'）//这是行需要修复
 .pipe（less（{
 paths：['public / less'] 
}））
 .pipe（prefixer（'last 2 versions'，'ie 9'））
 .pipe（gulp.dest（'./ public / css'））; 
}）; 
 
 //默认任务（当你运行`gulp'时调用）
 gulp.task（'default'，function（）{
 gulp.run（'less'） ; 
 
 //观察文件并运行任务（如果改变）
 gulp.watch（'./ public / less / *。less'，function（event）{
 gulp。 run（'less'）; 
}）; 
}）; 
  

编辑：请参阅下面的@noducks答案获取与最新gulp兼容的 / strong>。

I am using less and Grunt, and am moving to gulp.

My less works. When I run:

lessc public/less/myapp.less

I get working output with no errors. All my less, including includes, is in public/less, BTW. Here is my 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');
  });
});

When I run gulp, I get:

~/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 is defined, in a file imported at the start of myapp.less.

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

• Why isn't gulp picking up my includes? Specifying 'paths' option for less should make it work, but it isn't fixing it.
• What's a good way to debug this? I don't have a line number, for example.
• Is there a way to make gulp work?

解决方案

The difference was what I was compiling:

• When I ran lessc myapp.less, I was compiling the main less file and it's dependencies
• When I ran gulp using the gulpfile above, I was compiling each less file individually, because gulp.src was *.less not myapp.less. Since these less files are only ever loaded from the main less file, they didn't have @imports for the things they depend on (because myapp.less depends on them). Eg, there's no point importing, say, 'theme.less' in every individual file rather than just importing it first in myapp.less.

Here's the working version:

// 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: see @noducks answer below for an improved version that works with the latest gulp.

这篇关于Gulp较少不处理包括正确，包含的变量未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！