минификация ошибка с minifycss

Question

Я получил этот глотком 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 атм)

Answer 1

Примечание: если вы приземлились здесь, вы можете может испытывать issue #676, что означает, что вам необходимо обновить свой пакет.

---

Вы, вероятно, нужно обновить свои пакеты или запустить некоторые «бифуркация» отладку, чтобы найти реальную причину, потому что со следующей установки ваш вход выйдет просто отлично. (Другими словами: статус не Репрографический для меня.)

Что я сделал, чтобы получить вход правильно Minify, начиная с свежей репо:

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)"; 
} 

I Nto это 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 Отрывки "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:('...., то есть одна цитата. Я бы проверял ваш источник на любые котировки без кавычек/несовместимых котировок.

Answer 2

Я не могу добавить комментарий, чтобы спросить, но вы имеете в виду, что это нарушение из-за скобки в следующем:

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

Если да, то я бы вероятно, просто полностью отказаться от них. Свойство opacity на его основе поддерживается всеми основными браузерами и с IE9 (link).

Если вам нужна поддержка IE 8, я предлагаю использовать средство autoprefixer и добавлять его к вашему инструменту построения после минимизации.