cssregexgulpstylusfile-globs

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


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

Solution

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