bower css 파일을 파서 결합하는 방법

Question

gulp 스크립트를 사용하여 벤더 (bower, 스크린 샷 참조) 및 사용자 정의 스타일을 사용하여 서로 다른 컴파일 된 & 개의 CSS 파일을 작성하려고합니다. 그러나 벤더 스타일에 대한 우리의 임무는 예상대로 작동하지 않습니다. 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/')); 
});