minifycss 的缩小错误

Question

我有这个 gulp css 缩小线：

.pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))

当我缩小这个 css 部分时：

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; 
    -ms-filter: "alpha(opacity=30)";
}

我明白了：

mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30')"}

因为那个括号的事情破坏了整个css。

我是否错过了避免这种情况的任何选择？（无法切换到 nanocss atm）

Answer 1

我无法添加评论来询问这个问题，但你的意思是它因为以下括号而中断：

filter: "alpha(opacity=30)"; 
-ms-filter: "alpha(opacity=30)";

如果是这样，我可能会完全放弃这些。所有主流浏览器和 IE9 (link) 都支持它自己的不透明度属性。

如果您需要 IE 8 支持，我建议使用 autoprefixer 并在缩小后将其添加到您的构建工具中。

Answer 2

预先注意：如果您登陆此处，您可能遇到issue #676，这意味着您需要升级您的包裹。

您可能需要更新您的包，或开始一些 "bifurcation" 调试以找到真正的根本原因，因为使用以下设置您的输入会很好。（换句话说：status no repro 对我来说。）

我做了什么让你的输入正确缩小，从一个新的回购开始：

npm install gulp -g
npm install gulp --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-util --save-dev

这给了我这个 package.json:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-minify-css": "^1.2.3",
    "gulp-util": "^3.0.7"
  }
}

我已经提供了这个 styles.css 文件（你的代码，原样）：

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; 
    -ms-filter: "alpha(opacity=30)";
}

进入这个gulfile.js:

'use strict';

var gulp = require('gulp');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');

gulp.task('default', [], function() {
    gulp.src('styles.css')
        .pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))
        .pipe(gulp.dest('output'));
});

然后运行：

gulp

得到这个输出：

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}

据我所知，这个输出是正确的。

其中，当通过 Stack Snippets "Tidy" 功能时，等于：

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: .3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)"
}

您是否尝试过检查您的输入 css？那里可能隐藏着某个地方的问题...

PS。我的输出与你的不同，因为你有 url:('....，那是一个单引号。我会检查您的来源是否有任何杂散引号/不匹配的引号。

minifycss 的缩小错误

Minification error with minifycss

css

gulp

minify

gulp-minify-css

gulp-clean-css