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

Question

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

score 0 · Accepted Answer · answered Dec 02 '15 at 15:17

0

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

answered Dec 02 '15 at 15:17

avcajaraville

9,041
2
28
37

I tried that before, it does the job, but not exactly as intended. It was putting the processed .styl and .css files on different folders (reproducing the original folder structure of each file processed) as opposed to concatenating them and returning a single file. As it happens, gulp-concat did the trick. – nunop Dec 02 '15 at 15:48
Concatenating the two files .styl and .css doesn't seem to work very well after all, so I ended keeping the files separated and just flatten the folder structure with gulp-flatten. Anyway, thanks for the links and for the hint, it was spot on! – nunop Dec 02 '15 at 16:56

nunop · Answer 2 · 2015-12-02T17:03:44.187

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

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

2 Answers2