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正在过滤所有内容！我已经尝试添加标记为＆＃34;用于调试＆＃34;在上面的任务中，为了查看它在每个已过滤的部分中正在处理哪些文件，这表明正在过滤掉所有文件（即没有文件使用gulp.dest（）写入磁盘标记为上述调试的语句）。如果我在任何.pipe(*Filter.restore())行之后添加一行输出文件，它会输出原始输入中的所有文件（这些文件是正确的）。我还尝试使用否定模式进行过滤，但结果完全相同。

那我错过了什么？为什么过滤器返回 nothing ？

Answer 1

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

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

Answer 2

你的管道太长，试图处理无关的事情。

我宁愿在并行运行的不同任务中为每种类型的资产启动一个管道。

gulp-filter过滤掉所有文件

2 个答案: