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.