Question

我有以下文件夹和文件结构：

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忽略文件？

Answer 1

你几乎就在那里，感叹号就是它！＆＃39;！＆＃39;，只需将它作为数组传递：

例如：

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

有关详细信息：http://jb.demonte.fr/blog/production-package-with-gulp-js/

希望这有帮助。

Answer 2

尝试使用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/'))
    ;
});

如何使用gulp忽略文件？

2 个答案: