Gulp moins, pas de manipulation comprend correctement, inclus des variables non définies

J'utilise de moins en moins et Grognement, et me déplace à avaler.

Mes travaux moins. Quand je lance:

lessc public/less/myapp.less

Je faire fonctionner la sortie sans erreurs. Tous mes moins, y compris le comprend, est en public ou moins, BTW. Voici mon 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');
  });
});

Quand je lance gorgée, j'obtiens:

~/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 est définie dans un fichier importé au début de myapp.de moins en moins.

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

Pourquoi n'est-il pas avaler ramasser ma comprend? Spécifier les chemins d'accès pour les moins devrait le faire fonctionner, mais il n'est pas de le fixer.
Ce qui est une bonne façon de débogage? Je n'ai pas de numéro de ligne, par exemple.
Est-il un moyen de faire avaler de travail?

InformationsquelleAutor mikemaccana | 2014-01-09

35

La différence était ce j'ai été la compilation:
- Quand j'ai couru lessc myapp.less, j'était en train de rassembler les principaux moins de fichier et de ses dépendances
- Quand j'ai couru gulp à l'aide de la gulpfile ci-dessus, j'ai été la compilation de moins chaque fichier individuellement, parce que gulp.la src a été *.less pas myapp.less. Puisque ces fichiers ne sont jamais chargés de la principale moins, ils n'ont pas @importations pour les choses qu'ils dépendent (parce que myapp.de moins en dépend). Par exemple, il n'y a pas de point d'importation, de dire, 'thème.moins " dans chaque fichier individuel plutôt que de simplement l'importation d'abord dans myapp.de moins en moins.
Voici la version de travail:
```
//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: voir @noducks réponse ci-dessous pour un amélioration de la version qui fonctionne avec la dernière gorgée.
- Merci pour cette. J'ai rencontré le même problème. J'ai compris ce que je faisais mal, mais je n'étais pas sûr de savoir comment correctement l'orchestrer. +1
InformationsquelleAutor mikemaccana

Remarqué un couple de gulp.run dépréciation des avertissements ont été popping up là. Il les corrige et ajoute une gestion d'erreur. J'ai un peu différente de la structure de répertoire.

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

InformationsquelleAutor Sean McClory

Voici ma version de travail, à l'aide de gulp-watch et gulp-connect pour vivre recharger.

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

InformationsquelleAutor user2331095

0

Une autre raison pourrait être que vous êtes à l'aide de @import (inline) dans votre main.less, qui va provoquer le fichier importé de ne pas être traitées.

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

InformationsquelleAutor Pierlo Upitup

Vous devez vous connecter pour publier un commentaire.