使用 PostCSS 压缩和优化CSS实例

作者:袖梨 2022-06-25

关于如何使用 PostCSS 插件跨浏览器兼容,请点击这里: http://www.111com.net/cssdiv/css/98338.htm


本文主要讲的内容有:

通过@import将多个样式组合为一个,即使你的一些样式来自Bower组件或npm模块,都可以确保你你只需要请求一个单独的http,加载网站的CSS;匹配媒体查询,允许你将多个地点使用相同的媒体查询组合成一个;使用cssnano执行各种优化,删除空白和注释,并且压缩代码。

设置项目

你需要做的第一件事情是使用Gulp或Grunt设置你的项目。如果你没有一个较好的项目模板,你可以使用Gulp或者Grunt使用最少的代码来达到相同的目的。

如果你不想从头开始手动设置您的项目,你可以下载本教程中提供的源码附件,提取Gulp或Grunt项目到一个空的文件夹中。

然后在命令终端运行:npm install。

安装插件

在本教程中我们将使用两个单独的插件,加上一个插件包。通过运行下面的命令将插件安装到你的项目文件夹:

npm install postcss-import css-mqpacker cssnano --save-dev

现在已经将插件安装好了,让我们继续将需要的配置添加到项目中。

使用Gulp加载插件

如果你使用Gulp,可以在你的gulpfile.js文件中添加下面变量:

var atImport = require('postcss-import');
var mqpacker = require('css-mqpacker');
var cssnano = require('cssnano');

并且在processors数组中添加下面的变量名:

var processors = [
    atImport,
    mqpacker,
    cssnano
];

通过gulp css命令可以做一个快速测试,你可以看到你项目中dest文件夹中添加style.css文件。

使用Grunt添加插件

如果你使用的是Grunt设置项目,可以在你的gruntfile.js文件中的processors对象中添加下面的变量名,并且给指定对应的options参数:

processors: [
  require('postcss-import')(),
  require('css-mqpacker')(),
  require('cssnano')()
]

在命令终端执行grunt postcss命令做一个快速测试。查看你项目的dest文件夹中是否添加了style.css文件。

所有需要的插件都安装和加载到项目中,所以让我们继续学习如何使用它们来压缩和优化CSS。

使用@import压缩文件

很多时候,你的项目不仅仅加载一个样式表,而是会加载多个样式表。为了能更高效加载样式,应尽可能的将样式表合并成一个。

例如,normalize.css是非常常用的一个样式表,如果将它作为独立的样式表在主样式之前加载,这样就又多了一个http请求,因此减缓了加载时间。

使用@Maxime Thirouin的postcss-import插件,遵循@import规则,你可以将normalize.css样式合并到你的主样式表中,如此一来,加载相同的CSS就只需要一个http请求就够了。
使用@import内联加载normalize.css

现在让我们看看在项目中如何通过@import将normalize.css合并到主样式表中。首先需要到下载normalize.css文件,并将它放到你项目中的src文件夹中。

接着在src/style.css文件最顶部加入下面的代码:

@import 'normalize.css';

当你安装好postcss-import插件,它会检测到主样式表中@import引入的normalize.css文件,并且会自动将normalize.css样式合并到你的样式表中。

编译之后,在dest/style.css文件中就应该可以看到normalize.css的样式代码:

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;.......

你可以使用相同的方法尽可能的交独立的样式结合在一起。只需要在src/style.css文件中通过@import将想要合并的独立样式表引入进来即可。
自动发现Bower Component和Node Module中样式文件

这个插件还有一个非常有用特性,它能够自动发现bower_components或node_modules文件夹内的CSS文件位置。

正如上面所说的,你不需要手动安装normalize.css,你只需要在命令行中执行bower install normalize.css --save命令,即可将文件安装到你的项目中。这个时候会自动将最新的normalize.css下载到bower_components/normalize.css文件夹中。

    注:如果你电脑中没有安装Bower,可以点击这里进行了解。

在你的样式表顶部,使用上面的代码来替代:

@import 'normalize.css/normalize.css';

postcss-import插件会在你的bower_components文件夹中找到normalize.css文件,然后将代码合并到主样式表中。

以同样的方式,可以将node_modules文件夹中的样式引入到样式表中,这也意味着,你可以使用Bower或npm下载,管理依赖关系和更新。这个插件服务非常简单,就是可以将第三方CSS样式文件合并到你的样式表中。
使用@import行内导入样式的方法

通过@import可以将不同来源的CSS文件(比如bower_components/)导入到样式表中,如此一来,可以让你分开来独立管理样式。

例如,你可以创建一个文件来控制你的布局,另外创建一个文件来管理你的配色方案。如果您想改变你的配色方案,你只需遵循这样的过程:

    声明颜色的原样式表
    修改新颜色代码
    将新颜色样式表导入到你的项目
    编译创建备用颜色样式表

你可以重复这个程,这样就可以创建多外有效的颜色配色方案。

一些项目使用不同的样式表可以提供多个这样的配色方案,但这样会增加http请求,会影响网站的加载速度。使用这种方法你最后总是只需要请求一个http。

有关于postcss-import更多的信息可以点击这里进行了解。

结合匹配的媒体查询

@Kyo Nagashima的css-mqpacker插件可以找到样式表中相同的媒体查询样式合并到一个媒体查询中。这样允许你在写CSS的时候,媒体查询可以重复编写,你也不用担心这样会对你的样式产生冗余代码,而影响你的效率。

让我们来看一个简单的示例,你可能想要重复的媒体查询,比如根据视觉效果编写你的布局。在实际项目中,可能会给布局单独一个样式文件,但这里为了简单起见,我们还是将代码放置在src/style.css文件中。

从一些布局代码开始。将添加一个.column类,并且将其宽度设置为50%,默认情况,这两列并排在一起排列。然后使用一个媒体查询,在较小的屏幕下,让他们从上向下堆栈排列。把下面的代码添加到你的样式表中:

/* LAYOUT */

.column {
    width: 50%;
    float: left;
}

@media (max-width: 50rem) {
    .column {
        width: 100%;
        float: none;
    }
}

接下来,添加一些视觉效果,比如给列设置一个灰色的边框。第一列使用类名.column_one,第二列使用类名.column_two。我们使用相同的媒体查询,根据列的布局来改变边框样式。

将下面的代码添加到你的样式中:

/* VISUALS */

.column_one, .column_two {
    border: 0.0625rem solid #ccc;
}

.column_two {
    border-left: 0;
}

@media (max-width: 50rem) {
    .column_one, .column_two {
        border: 0.0625rem solid #ccc;
    }

    .column_two {
        border-top: 0;
    }
}

重新编译src/style.css文件,可以在dest/style.css中看到编译后的代码。

正如下面代码所示,css-mqpacker插件已经确认了两个媒体查询是相同的,并且将它们组合到一起:

/* LAYOUT */

.column {
    width: 50%;
    float: left;
}

/* VISUALS */

.column_one, .column_two {
    border: 0.0625rem solid #ccc;
}

.column_two {
    border-left: 0;
}

@media (max-width: 50rem) {

    .column {
        width: 100%;
        float: none;
    }

    .column_one, .column_two {
        border: 0.0625rem solid #ccc;
    }

    .column_two {
        border-top: 0;
    }
}

注意:由于使用cssnano插件,你看到的dest/style.css代码是被压缩的。你可以注释到gulpfile.js或gruntfile.js文件中processors数组中的cssnano,就可以看到上面未压缩的代码。

有关于css-mqpacker更多的信息可以点击这里进行了解。

cssnano插件包

@Ben Briggs提供了一个非常强大的CSS优化的插件包cssnano,这个插件包是一个可以即插即用的。它汇集了大约25个插件,只需要执行一个命令,就可以做多方面不同类型的优化。

cssnano优化包括下面一些类型:

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

根据上述优化列表,在你的项目中添加一些示例代码。在src/style.css中添加下面的代码:

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* This is an example of cssnano in action */
    font-weight: normal;
    margin-top: 1rem;
    margin-bottom: 2rem;
    margin-left: 1.5rem;
    margin-right: 2.5rem;
    font-weight: normal;
    padding: 1.75rem;
    width: calc(50rem - (2 * 1.75rem));
}

a {
    text-decoration: none;
    font-weight: bold;
}

p {
    font-weight: bold;
}

然后重新编译你的文件。

    注:你可以注释掉其它代码,这样你可以更清楚的看到结果。

在dest/style.css文件中你可以看到代码后的代码:

.css_nano,.css_nano+p,[class*=css_nano]{margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}a{text-decoration:none}a,p{font-weight:700}

看看上面列表中提到的代码清单,然后在比较一下编译前后的示例代码,看看发生了什么变化:

    空格、注释和最后一个分号删除掉了
    font-weight:normal和font-weight:bold都编译为font-weight:400和font-weight:700
    第二个重复的font-weight:normal规则从.css_nano样式中删除了
    calc()值被处理成一个静态值
    .css_nano, .css_nano + p, [class*="css_nano"], .css_nano压缩为.css_nano,.css_nano+p,[class*=css_nano]
    手写多个属性margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem;处理成margin:1rem 2.5rem 2rem 1.5rem;
    a和p的font-weight: 700;合并在一起

有关于cssnano插件优化的全部列表清单可以点击这里了解。

配置参数和禁用模块

cssnano插件包包含多个独立的插件,你完全可能根据自己的需求进行配置,甚至是完全禁用。

禁用插件,你可以通过cssnano把其参数设置为false。例如,你不想优化字体权重,你可以在gulpfile.js或gruntfile.js文件中这样设置:

// In Gulpfile 'processors' array
cssnano({
    minifyFontWeight: false
})

// In Gruntfile 'processors' array
require('cssnano')({
    minifyFontWeight: false
})

你可以按照相同的方法来配置插件的选择,每个是插件名称,然后设置其选项。

例如,使用calc()时,你可以设置小数的精度值(小数点后面的数量)。默认情况之下calc(100% / 2.27)得到的结果是36.23188%,如果你想精确到小位数后面的两位,你可以这样做:

// In Gulpfile 'processors' array
cssnano({
    calc: {precision: 2}
})

// In Gruntfile 'processors' array
require('cssnano')({
    calc: {precision: 2}
})

最后calc计算输出的值是36.23%。

总结

根据上面介绍的内容,我们做一个快速的总结:

    postcss-import插件提供了一个更有效的引入内联样式表的方法
    postcss-import插件可以引入第三方的样式表,也可以使用bower_components或npm_modules文件夹中的样式表
    postcss-import插件可以将样式表分割成多个部分,然后再重新组合它们
    css-mqpacker插件允许你将多个相同的媒体查询合并到一起
    cssnano插件汇集了25个不同的插件,提供即插即用,获得压缩和优化样式表的功能
    cssnano插件可以根据你自己的需求来配置包中的插件

相关文章

精彩推荐