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

标签 node.js css gulp minify

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 根本没有:

side-by-side comparision

我在 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/

相关文章:

javascript - 限制Node js中的Q promise 并发

javascript - 从不同的 javascript/Jquery 函数调用 Angularjs 函数

html - "%"IE无法识别

javascript - ionic : Keyboard overlaps a focused text input on iOS 11

npm - 为什么我的 gulp 4 gulp.js 出现断言错误

javascript - Gulp 插件做一个 JavaScript "include"

javascript - 在快速路由上应用 jwt 不会引发错误

node.js - 如何进行多个API调用

node.js - 如何使用 Headless Chrome Crawler 抓取整个网站?

javascript - 如何在对象属性上映射字符串序列