我有以下文件夹和文件结构:
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
我正在尝试确保以特定顺序将css文件添加到流中:
1)bootstrap.css文件
SRC /供应商/引导/ CSS / bootstrap.css
2)'src / vendor /'子目录中的所有其他css文件没有特定的顺序(我将来会添加更多,所以我不想让它太具体)
SRC /供应商/字体真棒/ CSS /字体awesome.css
SRC /供应商/ NIVO滑块/ NIVO-slider.css
3)'src / vendor / theme /'目录中的这些特定css文件没有特定的顺序
SRC /供应商/主题/ theme.css
SRC /供应商/主题/主题animate.css
SRC /供应商/主题/主题blog.css
SRC /供应商/主题/主题shop.css
4)最后是theme-responsive.css文件
SRC /供应商/主题/主题responsive.css
这是我的尝试:
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/'))
});
不幸的是,当我当前运行此脚本时,它应该忽略的bootstrap.css和其他文件被多次添加。如何使用gulp忽略文件?
答案 0 :(得分:2)
你几乎就在那里,感叹号就是它!'!',只需将它作为数组传递:
例如:
stream.queue(
gulp.src([
'src/vendor/theme/**/*.css',
'!src/vendor/theme/theme-responsive.css'
]);
);
有关详细信息:http://jb.demonte.fr/blog/production-package-with-gulp-js/
希望这有帮助。
答案 1 :(得分:1)
尝试使用gulp-concat。文件将按照在gulp.src函数中指定的顺序连接。 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/'))
;
});