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文件中，我有一个任务＆＃34; styles＆＃34;，它编译每个主题的scss文件，并将编译后的文件放到dist文件夹中。我有任务＆＃34;观看＆＃34;运行＆＃34;样式＆＃34;当任何scss文件形成任何源主题更改时的任务。它有效，但由于有很多主题需要很长时间！我的任务如何＆＃34;观看＆＃34;检测哪些主题文件发生了变化并运行任务＆＃34;样式＆＃34;只为这个改变了的主题？

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.run，您可以使用gulp.start。

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

1 个答案:

版本1

第2版