为什么 css-nano(几乎)不起作用?
Why is css-nano (almost) not working?
gulp-minify-css
says its deprecated, and points to 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
因此,我对这样一个孤立的案例一无所知。
可能有点离题,但我使用的 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'
}]
}
I got feedback from the plugin author:这些优化还没有实现。
也就是说,这与错误的参数或使用无关,这基本上是我的问题。他推荐 gulp-clean-css 作为替代方案。
我想我会坚持 gulp-minify-css 一段时间。
gulp-minify-css
says its deprecated, and points to 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
因此,我对这样一个孤立的案例一无所知。
可能有点离题,但我使用的 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'
}]
}
I got feedback from the plugin author:这些优化还没有实现。
也就是说,这与错误的参数或使用无关,这基本上是我的问题。他推荐 gulp-clean-css 作为替代方案。
我想我会坚持 gulp-minify-css 一段时间。