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调用的类（所以unss会删除它们）。我不想在我的忽略选项中放入30个类，而是忽略包含动态类的.css。

关键是，我仍然希望我的events.css与其他css连接，所以它必须进入管道（我想要一个.css文件用于我的所有网站）。

或者我应该制作第二个.less函数，它将unss文件与非unss文件合并？我不确定什么是达到我想要的最佳方式

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中，插件应该只做一件事。与处理文件相关的所有内容实际上都在你手中： - ）

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

1 个答案: