如何在Gulp中匹配並返回各種擴展名的文件？

我試圖返回擴展名爲.css和.styl的文件，位於不同的文件夾中，並在Gulp任務中使用它們，但沒有取得太大的成功。我想知道我在這裏做錯了什麼？這是我在這一點上代碼：如何在Gulp中匹配並返回各種擴展名的文件？

var pattrn = /(styl|css)$/g; 
var path1 = './dev/**/'; 

var paths = { 
    dev_styles: path1.match(pattrn), 
    build: './build' 
}; 

gulp.task('styles', function() { 
    var processors = [ 
    csswring, 
    autoprefixer({ browsers: [ 'last 2 version' ] }) 
]; 

return gulp 
    .src(paths.dev_styles) 
    .pipe(plugins.postcss(processors)) 
    .pipe(plugins.rename({ suffix: '.min'})) 
    .pipe(gulp.dest(paths.build)); 
});

我收到此錯誤：

Error: Invalid glob argument: null

來源

2015-12-02 pierrebonbon

**是否正確？ –

那麼，你的問題是，那不是怎麼咽的作品。

檢查documentation約gulp.src，它指出：

gulp.src(globs[, options]) accept glob or array of globs to read.

這意味着你不需要做花哨（怪異）過濾，指定適當的node-glob syntax就足夠了。

再回到你的問題，這將解決它：

gulp.task('styles', function() { 
    var processors = [ 
    csswring, 
    autoprefixer({ browsers: ['last 2 version' ] }) 
    ]; 
    return gulp 
    .src('root_to_styl_files/**/*.styl') // Will get all .styl files in the specified folder & subfolders 
    .pipe(plugins.postcss(processors)) 
    .pipe(plugins.rename({ suffix: '.min' })) 
    .pipe(gulp.dest('./build')); 
});

來源

2015-12-02 15:17:26 avcajaraville

我之前曾嘗試過，它完成了這項工作，但並不完全如我所願。它將處理後的.styl和.css文件放在不同的文件夾中（重現每個處理文件的原始文件夾結構），而不是連接它們並返回單個文件。碰巧，gulp-concat做了詭計。 – pierrebonbon

連接兩個文件.styl和.css似乎並沒有很好地發揮作用，所以我最終保持了文件的分離狀態，並用gulp-flatten來壓扁文件夾結構。無論如何，感謝您的鏈接和提示，它是現貨！ – pierrebonbon

的陣列水珠的是解決方案。正如avcajaraville所建議的那樣，不需要正則表達式。要進一步處理

.src(['./root_to_files/**/*.css', './root_to_files/**/*.styl']),

這將返回與模式相匹配的文件，使其可通過任何一飲而盡（管道）插件，您有：這裏有一個片段，做的工作。如果沒有進一步處理（例如平坦，乾淨等），它們將最終放在目標文件夾（dest）上，重現原始文件夾結構。

.pipe(gulp.dest('./build'));

來源

2015-12-02 16:36:36 pierrebonbon

如何在Gulp中匹配並返回各種擴展名的文件？

回答

相關問題