Настройка gulp-sass для работы как sass --watch

Question

Я пытаюсь перенести проект в рабочий процесс gulp-sass. После прочтения некоторых учебников в Интернете, я имею установку очень простой gulpfile:

var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    concat = require('gulp-concat'); 

gulp.task('styles', function() { 
    return gulp.src('scss/*.scss') 
    .pipe(sass({ 
     'sourcemap=none': true 
    })) 
    .pipe(gulp.dest('css/')) 
}); 

gulp.task('watch', function() { 
    gulp.watch('scss/**/*.scss', ['styles']); 
}); 

Я хочу, чтобы сгенерировать *.css файл из любого *.scss файла, который не начинается с символом подчеркиванием.

Моя проблема: с текущим gulpfile gulp обнаружит изменения в файлах .scss и перестроит ВСЕ библиотеки, вместо того чтобы создавать только те, на которые повлияло изменение.

К примеру, у меня есть 2 LIBS на моем проекте:

• lib1, который @imports Partials p1 и p2
• lib2, который @imports Partials p2 и p3

If I частичный p1, я хочу только lib1 для обновления.

Если я отредактирую частично p3, я хочу только обновить lib2.

Если я отредактировал частичный номер p2, я хочу обновить как lib1, так и lib2.

Текущая настройка обновляет обе библиотеки на каждое редактирование, которое я делаю в любом из источников *.scss.

Другими словами, я бы хотел, чтобы gulp-sass вел себя так же, как sass --watch. Это возможно? Как?

спасибо!

Answer 1

В настоящее время вы ориентируетесь все файлы SCSS в циферблате задаче:

gulp.watch('scss/**/*.scss', ['styles']); 

Вы можете сузить вложенную папку или к конкретным файлам. Вы можете Разбивку вашей часовой задачи на 2 часть, например:

gulp.watch('scss/p1/**/*.scss', ['stylesP1', 'stylesP2']); 
gulp.watch('scss/p2/**/*.scss', ['stylesP2', 'stylesP3']); 

, а затем создать 2 задачу стиля, чтобы соответствовать:

gulp.task('stylesP1', function() { /* Your task actions */ }); 
gulp.task('stylesP2', function() { /* Your task actions */ }); 
gulp.task('stylesP3', function() { /* Your task actions */ });