gulp-minify-css
says its deprecated , 并指向 gulp-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
根本没有:
我在 Windows7,x64 下。版本:
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
因此,我对这样一个孤立的案例一无所知。
最佳答案
我got feedback from the plugin author : 这些优化尚未实现。
这意味着,这与错误的参数或使用无关,这基本上是我的问题。他推荐gulp-clean-css作为备选。
我想我会坚持使用 gulp-minify-css再等一会儿。
关于node.js - 为什么 css-nano(几乎)不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35574050/