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?
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.