如何检测 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

这里只是 gulp 文件的例子：

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" 任务。它可以工作，但是由于主题很多，所以需要很多时间！我的任务 "watch" 如何检测到哪些主题文件发生了变化，而运行任务 "styles" 如何只检测这个变化的主题？

Answer 1

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

版本 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

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

How to detect css theme and work only with this theme?

gulp

gulp-watch

版本 1

版本 2