javascript - 是否可以在 Gulp 中忽略带有 unCSS 的文件？

Question

我一直在通过谷歌寻找一种方法来做我想做的事，但没有成功。

这是我的 gulp 任务

    gulp.task('less', function() {
    return gulp.src('css/*.less')
        .pipe(less())
        .pipe(stripCssComments({
            all: true
        }))
        .pipe(concat('main.css'))
        .pipe(uncss({
            html: ['index.html'],
            ignore: [
                '.visited',
                '.ripple',
                '.rippleEffect',
                '.ripple2',
                '.rippleEffect2',
                '.rippleDrop', '.rippleDrop2',
                '.ripple3',
                '.rippleEffect3',
                '.rippleDrop3',
                '.slide'
            ]
        }))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'))
});

如您所见，我已经有很多类要忽略。但是我的新 css 框架变得更糟了，它有几十个由 javascript 调用的类(所以 uncss 会删除它们)。我不想在我的忽略选项中放置 30 个类，而是只想忽略包含动态类的 .css。

重点是，我仍然希望将我的 events.css 与其他 css 连接起来，因此它必须进入管道(我想要我所有网站的单个 .css 文件)。

或者我应该创建第二个 .less 函数，它将 uncss 文件与非 uncss 文件合并？我不确定什么是实现我想要的最好方法

Answer 1

最后一点实际上是要去做的，但你不必做两个功能，你可以使用流合并:

var merge = require('merge2');

gulp.task('less', function() {
    var streamMain = gulp.src(['css/*.less', '!css/events.less'])
        .pipe(less())
        .pipe(stripCssComments({
            all: true
        }))
        .pipe(uncss({
            html: ['index.html']
        }));

    var streamEvents = gulp.src('css/events.less')
        .pipe(less())
        .pipe(stripCssComments({
            all: true
        }));

    return merge(streamMain, streamEvents)
        .pipe(concat('main.css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'));
});

在 Gulp 中，插件应该只做一件事。与处理文件有关的一切实际上都在您手中:-)