Setup gulp-sass to work like sass --watch - css

Question

I am trying to migrate a project to gulp-sass workflow. After reading some tutorials online, I have setup a very basic 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']);
});
I want to generate a *.css file from every *.scss file that doesn't begin with underscore.
My problem: with current gulpfile, gulp will detect changes on .scss files and rebuild ALL libraries, instead of building only the ones which have been affected by the change.
For example, I have 2 libs on my project:
lib1, which #imports partials p1 and p2
lib2, which #imports partials p2 and p3
If I edit partial p1, I want only lib1 to be updated.
If I edit partial p3, I want only lib2 to be updated.
If I edit partial p2, I want both lib1 and lib2 to be updated.
Current setup updates both libs on every edit that I make in any of the *.scss sources.
In other words, I would like gulp-sass to behave the same way as sass --watch does. Is this possible? How?
thanks!

Answer 1

Currently you're targeting all scss files in your watch task:
gulp.watch('scss/**/*.scss', ['styles']);
You can narrow it down to a subfolder or to specific files. You can breakdown your watch task into 2 parts, for example:
gulp.watch('scss/p1/**/*.scss', ['stylesP1', 'stylesP2']);
gulp.watch('scss/p2/**/*.scss', ['stylesP2', 'stylesP3']);
And then create 2 style tasks to match:
gulp.task('stylesP1', function() { /* Your task actions */ });
gulp.task('stylesP2', function() { /* Your task actions */ });
gulp.task('stylesP3', function() { /* Your task actions */ });