连接后如何缩小css？使用 Gulp 时的问题答案

【问题标题】：How to minify css after concatanation? Issue when using Gulp连接后如何缩小css？使用 Gulp 时的问题
【发布时间】：2015-12-15 10:54:41
【问题描述】：

我在 gulp 中使用以下任务来连接一些 CSS 文件。

脚本运行良好，我能够获得一个包含所有 CSS 的唯一文件“app-flat.css”。但我无法使用以下行缩小“app-flat.css”

.pipe(minifyCss())

我需要缩小 concat "app-flat.css" 的结果。

你能告诉我我的脚本有什么问题吗？我应该将 .pipe(minifyCss()) 作为最后一个进程吗？

var gulp = require('gulp');
var gutil = require('gulp-util');
var connect = require('gulp-connect');
var open = require('open');
var jscs = require('gulp-jscs');
var jshint = require('gulp-jshint');
var stylish = require('gulp-jscs-stylish');
var sloc = require('gulp-sloc');
var complexity = require('gulp-complexity');

var stylus = require('gulp-stylus');
var nib = require('nib');
var concat = require('gulp-concat');
var header = require('gulp-header');
var fs = require('fs');
var merge = require('merge-stream');
var minifyCss = require('gulp-minify-css');
var gp_uglify = require('gulp-uglify');
    gulp.task('theme-flat', function () {
        gulp.src([
            'themes/a/a.css',
            'themes/b/b.css'])
          .pipe(concat('app-flat.css'))
          .pipe(minifyCss())  // problem here
          .pipe(header(fs.readFileSync('copyright.txt', 'utf8')))
          .pipe(gulp.dest('themes/flat/'));
    });

注意：我可以使用另一个缩小器，例如 uglify 或其他，因为我不仅限于 gulp-minify-css

【问题讨论】：

这可能会对你有所帮助stackoverflow.com/questions/24591854/…
@sailens 请注意我的脚本使用 gulp-minify-css 感谢您的时间
只是为了确定：你能粘贴你的 var / require 吗？

标签： css gulp gulp-uglify

【解决方案1】：

你应该添加 concat 管道：

gulp.src('src/css/**/*.css')
    .pipe(minifyCSS())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
    .pipe(concat('app-flat.css'))
    .pipe(gulp.dest('dist/css'))

【讨论】：

【解决方案2】：

我想，如果我错了，请叫我出来。在创建 app-flat.css 文件后，您正在尝试缩小文件。您需要先通过pipe 传递concat

   gulp.task('theme-flat', function () {
        gulp.src([
            'themes/a/a.css',
            'themes/b/b.css'])
          .pipe(minifyCss())  // before you concat you're file
          .pipe(header(fs.readFileSync('copyright.txt', 'utf8')))
          .pipe(concat('app-flat.css'))
          .pipe(gulp.dest('themes/flat/'));
    });

【讨论】：