2016-02-23 7 views
1

gulp-minify-csssays its deprecated, и указывает на gulp-css-nano в качестве его преемника.Почему css-nano (почти) не работает?

Почему я пришел к таким слабым результатам с помощью cssnano?

Делаю minifything (и украсит потом для удобства чтения):

gulp.task('teststyles-nano', [], function() { 
    gulp.src('css/testcase.css') 
    .pipe(nano()) 
    .pipe(cssbeautify()) 
    .pipe(rename('nano.css')) 
    .pipe(gulp.dest('./public/')); 
}); 

gulp.task('teststyles-minify', [], function() { 
    gulp.src('css/testcase.css') 
    .pipe(minifyCss()) // resp. .pipe(minifyCss()) 
    .pipe(cssbeautify()) 
    .pipe(rename('minify.css')) // resp. 'minify.css' 
    .pipe(gulp.dest('./public/')); 
}); 

Вот мой testcase.css, с большим количеством намеренного материала для оптимизации:

html, body { 
    margin: 0; 
    padding: 0; 
} 

h1, h2, h3 { 
    color: green; 
    color: purple; /* redundant in place */ 
    background-color: #caa; 
} 
html, body { /* combine to above, remove duplicates? */ 
    margin: 0; 
    background-color: #aac; 
} 

/* group media queries, 
    remove redundant rules and/or combine p, div */ 
@media only screen and (max-width: 500px) { 
    p { background-color: orange; } 
} 
@media only screen and (max-width: 500px) { 
    p { background-color: purple; } 
    div { background-color: purple; } 
} 

h1, h2, h3, h1, h2 { /* combine to above, remove double selectors */ 
    font-family: 'Helvetica Neue', Helvetica, Arial, Arial, Arial, sans-serif; 
    font-weight: bold; 
    color: orange; 
    text-decoration: underline; 

    margin-top: 10px; /* screams combining */ 
    margin-right: 20px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
} 

minify.css имеет довольно почти все ожидалось, где nano.css просто нет:

side-by-side comparision

Я под Windows7, x64. Версии:

npm list --depth=0 | grep -i css 
├── [email protected] extraneous 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 

Таким образом, я довольно невежественный, на таком изолированном случае.

+1

Я не думаю, что ваш вопрос действительно, почему кто-то решил прекратить разработку проекта с открытым исходным кодом в свободное время, поэтому я предлагаю вам отредактировать вопрос и просто спросить о ваших конкретных проблемах с css nano. –

+0

** cssnano ** не делает работу, когда она не рядом с ней – Muhammed

ответ

1

I got feedback from the plugin author: Эти оптимизаций еще не реализованы.

Это означает, что речь идет не о неправильных параметрах или использовании, что было в основном моим вопросом. Он рекомендует в качестве альтернативы gulp-clean-css.

Я думаю, что я буду придерживаться gulp-minify-css на некоторое время.

0

Может быть отправной точкой немного, но я использую Grunt cssmin, который действительно делает большую работу, и конфигурация является: -

options: { 
    compatibility: 'ie8', 
    shorthandCompacting: false, 
    roundingPrecision: -1 
}, 
target: { 
    files: [{ 
     expand: true, 
     cwd: 'sass/', 
     src: ['*.css', '!*.min.css'], 
     dest: 'sass/minified', 
     ext: '.min.css' 
    }] 
} 
Смежные вопросы