如何 gulp 和连接 bower css 文件

Question

使用我们的 gulp 脚本，我们希望为供应商（通过 bower，参见屏幕截图）和自定义样式创建不同的编译和缩小 css 文件。但是，我们对供应商样式的任务没有按预期工作。我们期望它遍历 bower_components，获取 css 文件，连接它们，缩小它们并将生成的 vendor.min.css 保存到 dist/styles。然而，表示vendor.min.css没有生成。我们尝试在 return 语句中注释一些 .pipe() 命令，并怀疑它可能与 concat() 函数有关。

Bower 组件：

我们的部分 gulpfile.js 包括故障任务：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    debug = require('gulp-debug'),
    bower = require('gulp-main-bower-files'),
    uglify = require('gulp-uglify'),
    minify = require('gulp-clean-css'),
    filter = require('gulp-filter'),
    flatten = require('gulp-flatten'),
    autoprefix = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    del = require('del');

/**
 * Predefined file-type filters to use with gulp-filter
 */
var filters = {
  css: '**/*.css',
  js: '**/*.js',
  webFonts: ['**/*.otf','**/*.woff*', '**/*.woff2','**/*.ttf','**/*.eot','**/*.svg'],
  images: ['**/*.png','**/*.gif','**/*.jpg','**/*.svg'],
  movies: []
};

/**
 * concatVendorCSS
 * Create vendor.min.css from bower main files without bootstrap (as it is included in custom main.css)
 * no autoprefixing included: should be done by source package
 * scss-Files will be ignored - include them in /assets/styles/main.scss
 */
gulp.task('styles:vendor',['clean:vendor:styles'], function() {
    console.log('concatenating vendor css files and moving to dist...');
    var filterCSS = filter([filters.css], { restore: true });
    return gulp.src('bower.json')
        .pipe(bower())
        .pipe(filterCSS)
        .pipe(sourcemaps.init())
        .pipe(flatten())
        .pipe(concat('vendor.min.css'))
        .pipe(autoprefix(apConfig))
        .pipe(minify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/styles/'));
});

bower.json 文件:

{
  "name": "ptype",
  "homepage": "-",
  "authors": [
    "..."
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "css-hamburgers": "^0.5.0",
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.6",
    "font-awesome": "fontawesome#^4.6.3",
    "jquery": "^3.2.1",
    "selectize": "^0.12.4",
    "swiper": "^4.0.6",
    "jquery-focuspoint": "^1.1.3"
  },
  "overrides": {
    "font-awesome": {
      "main": [
        "./fonts/FontAwesome.otf",
        "./fonts/fontawesome-webfont.eot",
        "./fonts/fontawesome-webfont.svg",
        "./fonts/fontawesome-webfont.ttf",
        "./fonts/fontawesome-webfont.woff",
        "./fonts/fontawesome-webfont.woff2",
        "./scss/font-awesome.scss"
      ]
    }
  }
}

Answer 1

您需要更改协同工作的组件。使用 'main-bower-files' 代替 'gulp-main-bower-files' 并将 'gulp-concat' 与 'gulp-group-concat' 交换以组合，如下所示。

我离开了双重过滤器以获得更好的调试输出。

 var gulp = require('gulp'),
    sass = require('gulp-sass'),
    groupConcat = require('gulp-group-concat'),
    concat = require('gulp-concat'),
    debug = require('gulp-debug'),
    bowerMain = require('main-bower-files'),
    uglify = require('gulp-uglify'),
    minify = require('gulp-clean-css'),
    filter = require('gulp-filter'),
    flatten = require('gulp-flatten'),
    autoprefix = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    gutil = require('gulp-util'),
    del = require('del');

/**
 * concatVendorCSS
 * Create vendor.min.css from bower main files without bootstrap (as it is included in custom main.css)
 * no autoprefixing included: should be done by source package
 * scss-Files will be ignored - include them in /assets/styles/main.scss
 */
gulp.task('styles:vendor',['clean:vendor:styles'], function(){
    console.log('concatenating bower vendor css files into vendor.min.css and moving to ' + sassConfig.outputDirectory + '...');

  return gulp.src(bowerMain())
    .pipe( filter(filters.css) )
    .pipe( debug() )
    .pipe( sourcemaps.init() )
    .pipe( groupConcat( { 'vendor.min.css': filters.css } ) )
    .pipe( autoprefix(apConfig) )
    .pipe( minify() )
    .pipe( sourcemaps.write('./maps') )
    .pipe( gulp.dest('dist/styles/') );
});

如何 gulp 和连接 bower css 文件

How to gulp and concatenate bower css files

gulp

gulp-sourcemaps

gulp-concat

main-bower-files