Compile each SASS file with Gulp, creating multiple CSS files - css

Question

I have the need to compile a SASS file to a CSS file when saved, without having to compile every SASS file to a single CSS file.
I need the ability to:
- Run a 'watch' on a directory
- If a file is saved, a CSS of it's name is created. Example: 'main.scss' compiles to 'main.css'.
- It should not compile every single SASS if it doesn't need to.
The goal is to optimize the development process to avoid compiling every single SASS file in a directory when 'watching'.
My current SASS task looks a bit like this and results in a single CSS file:
//Compile Sass
gulp.task('styles', function() {
return gulp.src('app/scss/styles.scss')
.pipe(plugins.sass({ includePaths : [paths.sass], style: 'compressed'})
.pipe(plugins.autoprefixer('last 2 version'))
.pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.minifyCss())
.pipe(gulp.dest('build/css'));
});

Answer 1

Looks like gulp-changed is what you're looking for:
https://github.com/sindresorhus/gulp-changed
You add it as a dependency with npm install --save-dev gulp-changed and plug it into your gulpfile. From the gulp-changed ReadMe:
var gulp = require('gulp');
var changed = require('gulp-changed');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'dist';
gulp.task('default', function () {
return gulp.src(SRC)
.pipe(changed(DEST))
// ngAnnotate will only get the files that
// changed since the last time it was run
.pipe(ngAnnotate())
.pipe(gulp.dest(DEST));
});