web-dev-qa-db-fra.com

Gulp regarder et compiler moins de fichiers avec @import

J'essaie de lire et de compiler un projet .less + livereload . J'ai un fichier style.less qui utilise @import. Lorsque je lance la tâche d'absorption, il ne semble pas que comprendre les importations. Lorsque je modifie le fichier less principal principal, gulp le compile et actualise le navigateur. Toutefois, si je modifie uniquement une importation, les modifications sont ignorées.

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

J'ai essayé de ne pas spécifier le nom du fichier principal dans gulp.src('./*.less'), mais tous les fichiers de moins sont compilés individuellement. 

Merci

javascriptgulplivereloadgulp-less
19
Yannick Schall

À l’heure actuelle, vous ouvrez le fichier unique gulp.src et vous regardez Après avoir ouvert le fichier avec gulp . Ce qui suit divisera la surveillance et la surveillance en deux tâches, permettant ainsi une surveillance séparée des fichiers et une surveillance.

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

Lorsque l'un des fichiers trouvés avec *.less est modifié, il exécutera la tâche qui compilera uniquement le fichier src . Les @imports doivent être "inclus" correctement, sinon vérifiez les paramètres d'importation.

24
SteveLacy

Vous pouvez utiliser gulp-watch-less pour cela.

1
Rayron Victor