为什么css-nano(几乎)不起作用?

gulp-minify-css 表示不赞成 ,并指出gulp-css-nano作为其继任者。

怎么,我用cssnano达到如此之弱的结果?

我做的最小的事情(和美化之后的可读性):

 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下,64。 版本:

 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 

因此,在这样一个孤立的案例中,我相当无能为力。

我从插件作者得到反馈 :这些优化尚未实现。

这意味着,这不是关于错误的参数或使用,这基本上是我的问题。 他build议使用gulp-clean-css作为替代scheme。

我想我会坚持一点点的时间一点点的gulp-minify-css 。

可能会有一点点,但我使用Grunt cssmin这确实做得很好,configuration是: –

  options: { compatibility: 'ie8', shorthandCompacting: false, roundingPrecision: -1 }, target: { files: [{ expand: true, cwd: 'sass/', src: ['*.css', '!*.min.css'], dest: 'sass/minified', ext: '.min.css' }] }