Gulp смотреть и компилировать меньше файлов с помощью @import

Я пытаюсь обойти gulp, чтобы посмотреть и скомпилировать проект .less + livereload. У меня есть файл style.less, который использует @import. Когда я запускаю задачу gulp, она, похоже, не понимает импорт. Когда я изменяю основной файл меньшего размера, gulp компилирует файл и обновляет браузер, но если я изменяю только импорт, изменения игнорируются.

Вот мой 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());
});

Я попробовал не указывать имя основного файла в gulp.src('./*.less'), но тогда все файлы меньше скомпилированы.

Спасибо

Ответы

Ответ 1

В настоящий момент вы открываете единственный файл gulp.src и смотрите после открытия файла с помощью gulp. Следующее разделяет просмотр и src на две задачи, позволяя наблюдать за отдельными файлами и src.

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

Когда любой из файлов, найденных с помощью *.less, будет изменен, он запустит задачу, которая будет скомпилировать только файл src. @imports должен быть "включен" правильно, если не проверить параметры импорта.