Gulp 如何检测css主题并仅使用此主题？

我有一个项目，其中有大约30个css主题。这意味着我有了下一个css文件结构：

src/
    themes/
        default/
            a.scss
            b.scss
        rockStar/
            a.scss
            b.scss
        oneMoreTheme/
            a.scss
            b.scss
dist/
    themes/
        default/
            styles.css
        rockStar/
            styles.css
        oneMoreTheme/
            styles.css

以下是gulpfile的示例：

var gulp = require('gulp'),
  glob = require('glob'),
  path = require('path'),
  _ = require('underscore'),
  $ = require('gulp-load-plugins')(),
  options = {};

options.themes = [
    'default',
    'rockStar',
    'oneMoreTheme'
];

gulp.task('styles', function () {
    _.each(options.themes, function(themeName, themeKey) {
        gulp.src('src/themes/' + themeName + '/**/*.scss')
            .pipe($.concat('styles.scss'))
            .pipe($.sass())
            .pipe(gulp.dest('dist/themes/' + themeName + '/'));
    });
});

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

在我的gulp文件中，我有一个任务“styles”，它从每个主题编译scss文件，并将编译后的文件放入dist文件夹。 我有一个任务“watch”，当任何源主题的scss文件发生变化时，它会运行“styles”任务。这是可行的，但它需要很多时间，因为有很多主题！

---

我的任务“监视”如何检测哪些主题文件发生了更改，并仅针对此更改的主题运行任务“样式”？

这确实是一个难题，但这里有一个解决方案。有关说明，请参阅代码中的注释

版本1 版本2 我希望这有帮助

更新如果您想运行更多任务并在任务结束时打开状态调用，请转到版本2。然后可以添加所有要在其中运行的任务

gulp.task('default', function() {
    var watcher = gulp.watch('src/themes/**/*.scss', ['single-style', 'another-task']);
    watcher.on('change', function(e) {
        singleTheme = path
            .relative(__dirname, e.path)
            .substr('src/themes/'.length)
            .split('/')[0];
        console.log('rebuilding ' + theme);
    })
})

---

您可以使用

gulp.start

而不是

gulp.run

您使用的插件是什么

GulpRuby sass

或

gulp sass

？这实际上是一个大问题，bc Sass捆绑了您的文件，因此您没有从源文件到目标文件的直接连接<代码>吞下ruby sass但是已经有了很好的缓存。也许你也可以给我们看看你的gulpfile我更新了我的问题，你可以看到我的gulpfile（例如，我现在就做了，没有测试，这只是一个例子，让你理解我的意思）。ddprrt，我没有找到如何向你发送消息，所以我写在这里。你能帮我解决这个问题吗？

// same as above except the default task. we save the theme
// we want to build in a file
var singleTheme;

// and call the styleTask function should it be set
gulp.task('single-style', function(done) {
    if(singleTheme) {
        return styleTask(singleTheme);
    } else {
        done();
    }
});

// here we have a watcher that calls single-style, but before calling
// it gets the right themename.
gulp.task('default', function() {
    var watcher = gulp.watch('src/themes/**/*.scss', 'single-style');
    watcher.on('change', function(e) {
        singleTheme = path
            .relative(__dirname, e.path)
            .substr('src/themes/'.length)
            .split('/')[0];
        console.log('rebuilding ' + theme);
    })
})

gulp.task('default', function() {
    var watcher = gulp.watch('src/themes/**/*.scss', ['single-style', 'another-task']);
    watcher.on('change', function(e) {
        singleTheme = path
            .relative(__dirname, e.path)
            .substr('src/themes/'.length)
            .split('/')[0];
        console.log('rebuilding ' + theme);
    })
})