bower cssファイルをグルーピングおよび連結する方法

Question

gulpスクリプトを使用して、ベンダー向けに異なるコンパイル済み&のcssファイル（bower、スクリーンショットを参照）およびカスタムスタイルを作成する必要があります。しかし、ベンダースタイルのための私たちの仕事は期待どおりには機能しません。 bower_componentsを繰り返し、cssファイルを取得して連結し、それらを縮小し、vendor.min.cssをdist/stylesに保存することを期待しました。ただし、vendor.min.cssは生成されません。 returnステートメントの.pipe()コマンドの一部をコメントに書き出し、concat()関数と何か関係がある可能性があると考えました。

バウワーコンポーネント：故障したタスクを含む当社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

一緒に。 'gulp-main-bower-files'の代わりに '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/')); 
});