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

【问题标题】：How to use gulp-if to conditionally compile less files?如何使用 gulp-if 有条件地编译更少的文件？
【发布时间】：2014-04-16 05:57:22
【问题描述】：

我无法让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 源代码中添加一些日志，我可以看到条件 is 通过。

【问题讨论】：

标签： gulp gulp-if

【解决方案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/')
});

【讨论】：

我会试一试gulp-filter，但我仍然不明白gulp-if 什么不起作用。我以前见过used to compile coffeescript。
你是对的。 gulp-if 使用 gulp-match 应该处理正则表达式。这也应该是有效的：.pipe(gulpIf('**/*.less'),less(lessOptions))
gulp-if 和 gulp-filter 满足不同的需求。 gulp-filter 从流中删除与过滤器匹配的内容。 gulp-if 是一个三元流，如果匹配，则将内容传递给 if 和 else 流，然后将所有内容传递给下游。

【解决方案2】：

这听起来像是gulp-if 中的一个错误。尝试将gulp-if 升级到最新版本，如果这不起作用，请在https://github.com/robrich/gulp-if/issues 上发布问题。

【讨论】：

【解决方案3】：

gulp.task('css', function() {
    var condition = function(file) {
        if (file.extname == '.less') return true;
    };

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

【讨论】：

你在说什么？ gulpif 可以使用函数但不能使用正则表达式？
真的吗？因为接受正则表达式的文档specifically say。