Gulp 监视特定文件并生成其他文件

Question

我的 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']);
})

这基本上会监视所有 scss 文件。

我的theme.scss 包含：

@import "default"
@import "buttons"

我想查看特定文件，即default.scss 和buttons.scss，如果修改了这些文件，我想在theme.scss 中输入src 并重新生成theme.css

如何修改上面的代码来实现这一点？

感谢任何帮助。

Answer 1

如果我理解您的问题，我认为这可能是一个解决方案

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

如果你想在修改上述文件时只生成theme.scss，你可以添加这样的东西，并在上面的gulp.watch中添加'sass'之外的'sass_theme'。

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