Gulp less not handling包括正确的,包含未定义的变量

Question

我正在使用更少和Grunt,并且正在努力.

我的作品少了.当我跑:

lessc public/less/myapp.less

我得到工作输出没有错误.我所有的少,包括包括,在公共/更少,BTW.这是我的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;
}

• 为什么没有吞下我的包裹？为less指定'paths'选项应该可以使它工作,但它没有修复它.
• 调试这个的好方法是什么？例如,我没有行号.
• 有没有办法让gulp工作？

Answer 1

所不同的是什么,我编译:

• 当我跑步时lessc myapp.less,我正在编译主要较少的文件和它的依赖项
• 当我gulp使用上面的gulp文件运行时,我正在单独编译每个较少的文件,因为gulp.src *.less不是myapp.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的改进版本.

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