繁体   English   中英

合并后如何最小化CSS? 使用Gulp时的问题

[英]How to minify css after concatanation? Issue when using Gulp

我在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

您应该添加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'))

我想,如果我错了,就叫我出去。 在创建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/'));
    });

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM