問題描述

我正在使用 less 和 Grunt，并且正在轉向 gulp.

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

我的少工作.當我跑步時:

My less works. When I run:

lessc public/less/myapp.less

我得到了沒有錯誤的工作輸出.我所有的 less，包括 include，都是 public/less，順便說一句.這是我的 gulpfile:

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

當我運行 gulp 時，我得到:

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 在 myapp.less 開始處導入的文件中定義.

@brightblue is defined, in a file imported at the start of myapp.less.

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

• 為什么 gulp 不接收我的包含?為 less 指定 'paths' 選項應該可以讓它工作，但它并沒有修復它.
• 有什么好的調試方法?例如，我沒有行號.
• 有沒有辦法讓 gulp 工作?

推薦答案

不同之處在于 我正在編譯:

The difference was what I was compiling:

• 當我運行 lessc myapp.less 時，我正在編譯主 less 文件及其依賴項
• 當我使用上面的 gulpfile 運行 gulp 時，我正在單獨編譯每個 less 文件，因為 gulp.src 是 *.less 而不是 myapp.less.由于這些 less 文件僅從主 less 文件加載，因此它們沒有 @imports 用于它們所依賴的東西(因為 myapp.less 依賴于它們).例如，在每個單獨的文件中導入theme.less"而不是先在 myapp.less 中導入它是沒有意義的.
• 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.

這是工作版本:

// 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 的改進版本.

see @noducks answer below for an improved version that works with the latest gulp.

這篇關于Gulp less 未正確處理包含未定義的包含變量的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！