使用cssnano来压缩和优化你的css

@GuoYongfeng 2016-12-02 02:06:23发表于 iuap-design/blog

使用cssnano来压缩和优化你的css

什么是cssnano

cssnano是基于postcss的一款功能强大的插件包,它集成了近30个插件,只需要执行一个命令,就可以对我们的css做多方面不同类型的优化,比如:

  • 删除空格和最后一个分号
  • 删除注释
  • 优化字体权重
  • 丢弃重复的样式规则
  • 优化calc()
  • 压缩选择器
  • 减少手写属性
  • 合并规则
  • ...

完整的feature介绍

image

示例效果

源码

/* normalize selectors */
h1::before, h1:before {
    /* reduce shorthand even further */
    margin: 10px 20px 10px 20px;
    /* reduce color values */
    color: #ff0000;
    /* drop outdated vendor prefixes */
    -webkit-border-radius: 16px;
    border-radius: 16px;
    /* remove duplicated properties */
    font-weight: normal;
    font-weight: normal;
    /* reduce position values */
    background-position: bottom right;
}
/* correct invalid placement */
@charset "utf-8";

cssnano处理后

@charset "utf-8";h1:before{margin:10px 20px;color:red;border-radius:16px;font-weight:normal;background-position:100% 100%}

如何使用

cssnano & cli

# 下载cssnano命令行工具cssnano-cli
$ npm install cssnano-cli -g
# main.css就是你需要处理的css文件
$ cssnano < main.css > main.min.css

cssnano & webpack

如果你正在使用webpack,那么非常简单,你只需要下载css-loader即可,这个loader里面集成了cssnano。

$ npm install css-loader --save-dev

cssnano & gulp

如果你使用了gulp,那也很简单。

# 首先安装插件
$ npm install gulp gulp-cssnano --save-dev

然后配置gulpfile.js即可

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');

gulp.task('default', function () {
  return gulp.src('./main.css')
    .pipe(cssnano())
    .pipe(gulp.dest('./out'));
});

更多资料