Question

使用我们的gulp脚本，我们想要创建不同的编译和放大器。供应商的缩小css文件（通过bower，见截图）和自定义样式。但是，我们对供应商样式的任务不能按预期工作。我们希望它遍历bower_components，抓取css文件，连接它们，缩小它们并将生成的vendor.min.css保存到dist/styles。但是，未生成所述vendor.min.css。我们尝试对.pipe()语句中的一些return命令进行评论，并怀疑它可能与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/') );
});

如何吞咽和连接bower css文件

1 个答案: