javascript - installing - Gulp mira y compila menos archivos con @import

gulp watch html

Question

Estoy tratando de mover mi cabeza para ver y compilar un proyecto .less + livereload. Tengo un archivo style.less que utiliza @import . Cuando ejecuto la tarea gulp no parece entender las importaciones. Cuando modifico el archivo principal menos, Gulp compila el archivo y actualiza el navegador, pero si modifico solo una importación, los cambios se ignoran.

Aquí está mi gulpfile.js

var gulp = require(''gulp'');
var less = require(''gulp-less'');
var watch = require(''gulp-watch'');
var prefix = require(''gulp-autoprefixer'');
var plumber = require(''gulp-plumber'');
var livereload = require(''gulp-livereload'');
var path = require(''path'');

gulp.task(''default'', function() {
    return gulp.src(''./style.less'')
        .pipe(watch())
        .pipe(plumber())
        .pipe(less({
          paths: [''./'', ''./overrides/'']
        }))
        .pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
        .pipe(gulp.dest(''./''))
        .pipe(livereload());
});

Intenté no especificar el nombre del archivo principal en gulp.src(''./*.less'') pero luego todos los archivos menos se compilan indvidualmente.

Gracias

Answer 1

En este momento está abriendo el archivo gulp.src único y mirando. Después de abrir el archivo con gulp. Lo siguiente dividirá la observación y src en dos tareas, lo que permitirá la visualización de archivos y src por separado.

var gulp = require(''gulp'');
var less = require(''gulp-less'');
var watch = require(''gulp-watch'');
var prefix = require(''gulp-autoprefixer'');
var plumber = require(''gulp-plumber'');
var livereload = require(''gulp-livereload'');
var path = require(''path'');

gulp.task(''less'', function() {
    return gulp.src(''./style.less'')  // only compile the entry file
        .pipe(plumber())
        .pipe(less({
          paths: [''./'', ''./overrides/'']
        }))
        .pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
        .pipe(gulp.dest(''./''))
        .pipe(livereload());
});
gulp.task(''watch'', function() {
    gulp.watch(''./*.less'', [''less'']);  // Watch all the .less files, then run the less task
});

gulp.task(''default'', [''watch'']); // Default will run the ''entry'' watch task

Cuando se modifique cualquiera de los archivos encontrados con *.less , se ejecutará la tarea que compilará solo el archivo src. Las @imports deben estar ''incluidas'' correctamente, de lo contrario, compruebe la configuración de importación.

Answer 2

Puedes usar gulp-watch-less para esto.