javascript - gulp-filter 过滤掉所有文件

Question

我正在努力将我的工作流程转移到 Gulp 上，到目前为止我很喜欢它；但是，我似乎误解了 gulp-filter 插件的工作原理......

我有以下任务:

gulp.task('assets', function() {
    var stylesFilter = gulpFilter(stylesPath);
    var imagesFilter = gulpFilter(imagesPath);
    var scriptsFilter = gulpFilter(scriptsPath);

    return gulp.src([].concat('app/**/*.html', stylesPath, imagesPath, scriptsPath))
        // STYLES
        .pipe(stylesFilter)
        .pipe(gulp.dest('dist/test_styles')) // For debugging!
        .pipe(sass({style: 'expanded' }))
        .pipe(autoPrefixer('> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1'))
        .pipe(concat('main.css'))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest('dist/css'))
        .pipe(stylesFilter.restore())

        // SCRIPTS
        .pipe(scriptsFilter)
        .pipe(gulp.dest('dist/test_scripts')) // For debugging!
        .pipe(jsHint('.jshintrc'))
        .pipe(jsHint.reporter('jshint-stylish'))
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest('dist/js'))
        .pipe(scriptsFilter.restore())

        // IMAGES
        .pipe(imagesFilter)
        .pipe(gulp.dest('dist/test_images')) // For debugging!
        .pipe(cache(imageMin({ optimizationLevel: 7, progressive: true, interlaced: true })))
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest('dist/img'))
        .pipe(imagesFilter.restore());
});

我使用的路径变量定义如下:

var stylesPath = [
    'bower_components/foundation/scss/normalize.scss', 
    'bower_components/foundation/scss/foundation.scss',
    'app/styles/app.scss'
],
scriptsPath = [
    'app/scripts/**/*.js',
    '!app/scripts/**/*_test.js'
],
imagesPath = [
    'app/images/**/*'
];

我的问题是 stylesFilter、imagesFilter 和 scriptsFilter 过滤掉了一切!我已经尝试在上面的任务中添加标记为“用于调试”的行，以便查看它在每个过滤的部分中正在处理哪些文件，这表明所有文件都被过滤掉了(即上面标记为用于调试的 gulp.dest() 语句没有文件写入磁盘)。如果我在任何 .pipe(*Filter.restore()) 行之后添加一行用于输出文件，它会输出原始输入中的所有文件(这是正确的文件)。为了更好地衡量，我还尝试对过滤器使用取反模式，但结果完全相同。

那我错过了什么？为什么过滤器什么都没有返回？

Answer 1

好的，所以我找到了这种行为的原因:

gulp-filter 在后台使用 multimatch 模块，它使用 Vinyl 文件对象作为它读取的文件，并将 File.relative 传递给 multimatch 函数(这是相对于 File.base 的相对路径，等于第一个 glob)。因此，当我将 'bower_components/foundation/scss/normalize.scss' 用作 glob 时，File.relative 仅包含文件名，而 'bower_components/foundation/scss/normalize.scss' 与 'normalize.scss' 不匹配。