How do I ignore a file using gulp?

Question

I have the following folder and file structure:

Vendor   
  bootstrap
    css
      -bootstrap.css
    js
      -bootstrap.js   
  font-awesome
    css
      -font-awesome.css   
  nivo-slider
    -nivo-slider.css   
  theme
    -theme.css
    -theme-animate.css
    -theme-blog.css
    -theme-responsive.css
    -theme-shop.css

I am trying to make sure that the css files are added to the stream in this specific order:

1) The bootstrap.css file
src/vendor/bootstrap/css/bootstrap.css

2) All of the other css files inside the 'src/vendor/' sub-directories in no particular order (I will be adding more in the future so I don't want to make this too specific)
src/vendor/font-awesome/css/font-awesome.css
src/vendor/nivo-slider/nivo-slider.css

3) These specific css files inside the 'src/vendor/theme/' directory in no particular order
src/vendor/theme/theme.css
src/vendor/theme/theme-animate.css
src/vendor/theme/theme-blog.css
src/vendor/theme/theme-shop.css

4) And finally the theme-responsive.css file
src/vendor/theme/theme-responsive.css

Here is my attempt:

var gulp = require('gulp');
var streamqueue = require('streamqueue');

gulp.task('styles', function() {
    var stream = streamqueue({ objectMode: true });

    // file that needs to be at the beginning of the concatenated css file
    stream.queue(
        gulp.src('src/vendor/**/bootstrap.css')
    );

    //Now I want to add most of the remaining files, except for the bootstrap.css file that was already added as well as any files with the word theme at the beginning of it
    stream.queue(
        gulp.src('src/vendor/**/*.css', '!src/vendor/**/bootstrap.css', '!src/vendor/**/theme*.css')
    );

    //Now I would like to add the files that begin with the word theme at the beginning, except for theme-responsive.css
    stream.queue(
        gulp.src('src/vendor/theme/**/*.css', '!src/vendor/theme/theme-responsive.css')
    );

    //Now I would like to add the theme-responsive.css file
    stream.queue(
        gulp.src('src/vendor/theme/theme-responsive.css')
    ); 

    return stream.done()
        .pipe(concat("app.css"))
        .pipe(gulp.dest('public/css/'))
});

Unfortunately, when I currently run this script, the bootstrap.css and other files that it should be ignoring are being added multiple times. How do I ignore a file using gulp?

Answer 1

You are almost there, the exclamation character is for it '!', just need to pass it as array:

eg:

stream.queue(
  gulp.src([
    'src/vendor/theme/**/*.css',
    '!src/vendor/theme/theme-responsive.css'
  ]);
);

For more information: http://jb.demonte.fr/blog/production-package-with-gulp-js/

Hope this helps.

Answer 2

Try using gulp-concat. Files will be concatenated in the order that they are specified in the gulp.src function. https://www.npmjs.org/package/gulp-concat

var concat = require('gulp-concat');

gulp.task('scripts', function() {
    gulp.src(['src/vendor/bootstrap/**/*.css', 
              'src/vendor/font-awesome/**/*.css', 
              'src/vendor/nivo-slider/**/*.css', 
              'src/vendor/theme/theme.css',
              'src/vendor/theme/theme-animate.css',
              'src/vendor/theme/theme-blog.css',
              'src/vendor/theme/theme-shop.css',
              'src/vendor/theme/theme-responsive.css'])
        .pipe(concat('app.css'))
        .pipe(gulp.dest('public/css/'))
    ;
});