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

Question

我有一个项目，其中有大约 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 文件夹。 当任何 scss 文件形成任何源主题更改时，我有任务“watch”运行“styles”任务。它有效，但由于主题很多，它需要很长时间！ 我的任务“监视”如何检测哪些主题文件发生了变化并仅为这个更改的主题运行任务“样式”？

Answer 1

这确实是一个艰难的问题，但这里有一个解决方案。解释请参考代码中的cmets。

版本 1

var gulp = require('gulp');
var merge = require('merge2');
var $ = require('gulp-load-plugins')();
var path = require('path');
var options = {};

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

// we extract the task itself to a new function
// this allows us to reuse it
var styleTask = function(themeName) {
    return gulp.src('src/themes/' + themeName + '/**/*.scss')
        .pipe($.concat('styles.scss'))
        .pipe($.sass())
        .pipe(gulp.dest('dist/themes/' + themeName + '/'));
}

// we adapt the style task to use that function
// please note that I switched _.each for merge
// this allows you to work with streams!
gulp.task('styles', function() {
    var tasks = themes.map(styleTask);
    return merge(tasks);
});

// here we set up a new watcher. Instead of running 'styles'
// we filter the theme directory from the file that has changed
// and run the styleTask function
gulp.task('default', function() {
    var watcher = gulp.watch('src/themes/**/*.scss', function(e) {
        var theme = path
            .relative(__dirname, e.path)
            .substr('src/themes/'.length)
            .split('/')[0];
        console.log('rebuilding ' + theme);
        return styleTask('theme');
    });
});

版本 2

// 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);
    })
})

我希望这会有所帮助。

更新如果您想运行更多任务并在它们结束时调用状态，请选择版本 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。