javascript - tag - Tragar menos no manejar incluye correctamente, incluye variables no definidas

title tag html5

Question

Estoy usando menos y Grunt, y me estoy moviendo para tragar.

Mi menos funciona. Cuando corro

lessc public/less/myapp.less

Obtengo resultados de trabajo sin errores. Todo mi menos, incluyendo los incluidos, está en público / menos , por cierto. Aquí está mi 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'');
  });
});

Cuando corro trago, me sale:

~/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á definido, en un archivo importado al inicio de myapp.less.

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

• ¿Por qué el trago no está recogiendo mis objetos? Especificar la opción de ''rutas'' por menos debería hacer que funcione, pero no lo está arreglando.
• ¿Cuál es una buena manera de depurar esto? No tengo un número de línea, por ejemplo.
• ¿Hay alguna manera de hacer que el trago funcione?

Answer 1

Aquí está mi versión de trabajo, usando gulp-watch y gulp-connect para recargar en vivo.

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

Answer 2

La diferencia era lo que estaba compilando:

• Cuando ejecuté lessc myapp.less , estaba compilando el archivo main less y sus dependencias
• Cuando ejecuté gulp usando el gulpfile anterior, estaba compilando cada archivo menos individualmente, porque gulp.src era *.less no myapp.less . Dado que estos menos archivos solo se cargan desde el archivo principal menos, no tienen @imports para las cosas de las que dependen (porque myapp.less depende de ellos). Por ejemplo, no tiene sentido importar, digamos, ''theme.less'' en cada archivo individual en lugar de simplemente importarlo primero en myapp.less.

Aquí está la versión de trabajo:

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

Edición: consulte la respuesta de @noducks a continuación para obtener una versión mejorada que funciona con la última versión .

Answer 3

Noté un par de gulp.run advertencias de desprecio estaban apareciendo allí. Esto los corrige, y agrega algún manejo de errores. Tengo una estructura de directorios ligeramente diferente.

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

Answer 4

Otra causa podría ser que esté utilizando @import (inline) en su main.less , lo que hará que el archivo importado no se procese.

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