Gulp watch for specific file and generate other file

Question

I have this code in my gulpfile.js

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});

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

This basically watches all scss file.

My theme.scss contains:

@import "default"
@import "buttons"

I want to watch for a specific file i.e default.scss and buttons.scss and if those are modified I want to src in my theme.scss and regenerate theme.css

How do I modify the above code to achieve this?

Any help is appreciated.

Answer 1

If I understand your question, I think this might be a solution

gulp.task('default', function(){
    gulp.watch(['default.scss', 'buttons.scss', ..., 'the-files-you-want-to-watch'], ['sass']);
});

If you want to just generate theme.scss when modifying the said files, you could add something like this, and add 'sass_theme' besides 'sass' in the gulp.watch above.

gulp.task('sass_theme', function() {
    gulp.src('theme.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});