编程语言
首页 > 编程语言> > javascript – gulp-filter过滤掉所有文件

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

作者:互联网

我正在努力将我的工作流程转移到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过滤掉了一切!我已经尝试在上面的任务中添加标记为“for debugging”的行,以便查看它在每个已过滤的部分中正在处理哪些文件,这表明所有文件都被过滤掉(即没有文件写入磁盘标记为上面调试的gulp.dest()语句.如果我在任何.pipe(* Filter.restore())行之后添加一行输出文件,它将输出原始输入中的所有文件(这些文件是正确的).我还是,为了好的措施,尝试使用否定模式的过滤器,但结果完全相同.

那我错过了什么?为什么过滤器没有返回任何内容?

解决方法:

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

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’不匹配.

标签:javascript,gulp,filter,build-process,gulp-filter
来源: https://codeday.me/bug/20190725/1530275.html