1

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

这是我的吞咽任务

    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 文件合并？我不确定实现我想要的最佳方式是什么

4

1 回答 1

2

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

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 中，插件应该只做一件事。与处理文件相关的一切实际上都在您手中:-)

于 2015-05-14T18:01:09.783 回答