gulp-minify-css
says its deprecated, and points to gulp-css-nano as its successor.
How come, I reach so much weaker results with cssnano?
I do the minifything (and beautify afterwards for readability):
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/') );
});
Here's my testcase.css, with plenty of intentional stuff to optimize:
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
has pretty much all expected, where nano.css
simply does not:
I am under Windows7, x64. Versions:
npm list --depth=0 | grep -i css
├── css-purge@1.1.1 extraneous
├── gulp-css-purge@1.0.27
├── gulp-cssbeautify@0.1.3
├── gulp-cssnano@2.1.1
├── gulp-minify-css@1.2.3
Thus I am pretty clueless, on such an isolated case.
I got feedback from the plugin author: These optimizations are not yet implemented.
That means, it's not about wrong parameters or use, which was basically my question. He recommends gulp-clean-css as an alternative.
I think I will stick with gulp-minify-css for a little while longer.