0

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

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/vendor/bootstrap/css/bootstrap.css

2) 'src/vendor/' 子目录中的所有其他 css 文件，没有特定的顺序（我将来会添加更多，所以我不想让它太具体）
src/vendor/font-真棒/css/font-awesome.css
src/vendor/nivo-slider/nivo-slider.css

3) 'src/vendor/theme/' 目录中的这些特定 css 文件没有特定顺序
src/vendor/theme/theme.css
src/vendor/theme/theme-animate.css
src/vendor/theme/theme-blog .css
src/vendor/theme/theme-shop.css

4) 最后是theme-responsive.css 文件
src/vendor/theme/theme-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 忽略文件？

4

2 回答 2

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/

希望这可以帮助。

于 2014-09-13T18:39:21.593 回答
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/'))
    ;
});
于 2014-09-13T18:24:44.380 回答