How to match and return files with various extensions in Gulp?

473 views Asked by At

I am trying to return files with extensions .css and .styl, located in different folders, and use them in a Gulp task, without much success. I wonder what I am doing wrong here? This is my code at this point:

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 ) );
});

I am getting this error:

Error: Invalid glob argument: null
2

There are 2 answers

2
avcajaraville On BEST ANSWER

Well, your problem is that thats not how gulp works.

Check the documentation about gulp.src, it states:

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

This means you dont need to do fancy (weird) filtering, specifying a proper node-glob syntax would be enough.

Going back to your problem, this will fix it:

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' ) );
});
0
nunop On

An array of Globs is the solution. No need for a regular expression, as suggested above by avcajaraville. Here' a snippet that did the job:

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

This will return the files that match the pattern and make them available to be further processed (piped) by whatever gulp plugins you have. They will finally be put on the destination folder (dest), reproducing the original folder structure if no further processing is done (such as flatten, clean, etc.).

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