css - Gulp中如何匹配返回各种扩展名的文件？

Question

我试图返回位于不同文件夹中的扩展名为 .css 和 .styl 的文件，并在 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

Answer 1

嗯，你的问题是 gulp 不是这样工作的。

检查 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' ) );
});