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
因此,在这样一个孤立的案件中,我很无能为力。
答案 0 :(得分:1)
我got feedback from the plugin author:这些优化尚未实施。
这意味着,它不是关于错误的参数或使用,这基本上是我的问题。他建议gulp-clean-css作为替代方案。
我想我会坚持gulp-minify-css一段时间。
答案 1 :(得分:0)
可能会稍微偏离点但是我使用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'
}]
}