为什么 css-nano（几乎）不起作用？答案

【问题标题】：Why is css-nano (almost) not working?为什么 css-nano（几乎）不起作用？
【发布时间】：2016-02-23 09:49:04
【问题描述】：

gulp-minify-csssays its deprecated，并指向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、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

因此，对于这样一个孤立的案例，我很无知。

【问题讨论】：

我不认为您的问题是为什么有人决定在业余时间停止开发开源项目，所以我建议您编辑问题并询问您使用 css nano 的具体问题。
cssnano 当它不在它旁边时，它不会做这项工作

标签： node.js css gulp minify

【解决方案1】：

我got feedback from the plugin author：这些优化还没有实现。

也就是说，这与错误的参数或使用无关，这基本上是我的问题。他推荐gulp-clean-css 作为替代方案。

我想我会再坚持一段时间gulp-minify-css。

【讨论】：

【解决方案2】：

可能有点离题，但我使用 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'
    }]
}

【讨论】：