it-swarm.com.ru

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

Я пытаюсь разобраться с gulp, чтобы посмотреть и скомпилировать проект .less + livereload . У меня есть файл style.less, который использует @import. Когда я запускаю задачу gulp, кажется, что понять импорт. Когда я изменяю основной файл less, 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'), но все остальные файлы компилируются индивидуально. 

Спасибо

19
Yannick Schall

Прямо сейчас вы открываете один файл 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 должен быть корректно включен, если не проверять настройки импорта.

24
SteveLacy

Вы можете использовать gulp-watch-less для этого.

1
Rayron Victor