Gulp: как при изменении одного файла пересобирать другой?

Question

[NkDev]

Есть файл article.less следующего содержания:
@imрort "config";
@imрort "header";
@imрort "body";
@imрort "footer";

При изменении, например, файла header.less мне нужно чтобы компилировался только файл articles.less, а у меня компилируются все 4 файла. По факту мне отдельные блоки css не нужны. Меня интересует только итоговый файл, который я подключу на страницу.

Кроме того, при компиляции файла header.less, гульп выдает ошибку, что не найдена переменная. Эта переменная задается в файле config.less, поэтому файл article компилируется нормально, а когда гульп отдельно начинает компилировать header он ее не находит. Выходит что я должен в каждом файте подключать config?

Как обойти эти проблемы?

Comments

[ChickenGrinder]

Из текста непонятно как организован процесс, приведите код из `gulpfile`.

[Егор Живагин]

gulpfile в студию!

[NkDev]

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');


gulp.task('less', function() {
  return gulp.src('web/src/style/less/**/*.less')
 .pipe(less())
 .pipe(minifyCSS())
 .pipe(gulp.dest('web/src/style/css'))
})


gulp.task('watch', function(){
  gulp.watch('web/src/style/less/**/*.less', ['less']); 
})

Answer 1

[Антон Спирин]

Разбейте на подзадачи:

gulp.task('watch:article', function(){
  gulp.watch('web/src/style/less/article/**/*.less', ['less:article']); 
});
gulp.task('watch:less', ['watch:article', 'watch:other']);
gulp.task('watch', ['watch:less', 'watch:js']);