gulp - 如何使用 gulp-if 有条件地编译更少的文件？

Question

我无法得到 gulp-if正常工作。

没有 gulp - 如果它工作正常:

gulp.task('css', function() {
    return gulp.src([
    //  'bower_components/bootstrap/dist/css/bootstrap.css',
        'app/stylesheets/main.less',
    ])
    .pipe(less({
        strictMath: true,
         strictUnits: true,
    }))
    .pipe(concat('all.css', {newLine: '\n'}))
    .pipe(prefixer('> 1%'))
    .pipe(minifyCss())
    .pipe(gulp.dest('public/css'));
});

但是一旦我添加 gulp-if进入混合， gulpif管道返回主流时不返回任何内容:

gulp.task('css', function() {
    return gulp.src([
        'bower_components/bootstrap/dist/css/bootstrap.css',
        'app/stylesheets/main.less',
    ])

        .pipe(gulpif(/\.less$/,less({
            strictMath: true,
            strictUnits: true,
        })))
        .pipe(concat('all.css', {newLine: '\n'}))
        .pipe(prefixer('> 1%'))
        .pipe(minifyCss())
        .pipe(gulp.dest('public/css'));
});

这是为什么？我究竟做错了什么？如果我在 gulp-if 中添加一些日志源代码我可以看到条件正在通过。

Answer 1

我想你可能想使用 gulp-filter相反:https://www.npmjs.org/package/gulp-filter

gulp.task('css', function() {
    var lessFilter = gulpFilter('**/*.less', {restore: true})
    return gulp.src([
        'bower_components/bootstrap/dist/css/bootstrap.css',
        'app/stylesheets/main.less',
    ])

    .pipe(lessFilter)
    .pipe(less({
        strictMath: true,
        strictUnits: true,
    }))
    .pipe(lessFilter.restore)

    .pipe(concat('all.css', {newLine: '\n'}))
    .pipe(prefixer('> 1%'))
    .pipe(minifyCss())
    .pipe(gulp.dest('public/css'));
});

这将创建一个过滤流和 restore()将恢复流。 gulpIf用于有条件地处理整个流，而不仅仅是匹配文件。

gulp.src('src/**/*.js', function () {
    .pipe(gulpIf(isProduction, concat('all.js')))
    .pipe(gulp.dest('dest/')
});