[Gulp.js系列教程][16]PostCSS

版权声明

本文出自 “ 幻冥极地 ” 博客 ,作者 小貘 采用 署名-非商业性使用-相同方式共享 协议。转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
https://www.moorehy.com/archives/330

原文跳转:Introduction to Gulp.js 16: PostCSS

这是我 Gulp.js系列教程 的第16篇。这次我将展示如何使用 PostCSS 处理 CSS 文件。我将使用 PostCSS 替换 Ruby Sass 并额外展示如何开发时使用样式检查器在后台自动进行语法检查。

Compass, Sass, LESS, Stylus … 为什么我们需要这么多的工具?

我使用了 Sass 和 SCSS 很长时间,最开始是 Compass ,之后转向 Ruby Sass 还想转向 libSass,但是对我心爱的 Gems 的依赖把我拉了回来。

现在有许多扩展 CSS 的预处理器、库、框架。他们都做得很好,我不想错过变量、嵌套、混合宏( Mixins )这样的特性。但是 Ruby Sass 和 Compass 特别的慢~~~~~~~,因为 Ruby 很慢。编译我的网站样式需要花费 7-8 秒,但是工程的每一处改变都将触发一次重编译,这将花费超过一分钟的时间!

PostCSS 是什么?为什么我要用它?

现在有了一个新的工具: PostCSS 。我不关心它是预处理器,后处理器,亦或仅仅是一个处理器。你写下些东西,它将处理你写的东西并输出 CSS 。

如果 Sass 和它的竞争者做了同样的工作,为什么你要使用一个新的工具?因为它快速(快3-30倍),模块化,可扩展。我打赌你只需要你预处理器功能的一小部分。

使用 PostCSS 您可以从当前超过 200 个插件中选择您需要的。如果您没有发现您需要的插件,您可以编写自己的插件语法解析器

您将获得全部这些:变量、混合宏( Mixins ),扩展( Extends ),颜色助手( Color Helpers ),回退( Fallbacks ),优化( Optimizations ) … 供您选择。您甚至可以现在开始使用未来的 CSS 语法,让 PostCSS 帮您做转换。

我是用 PostCSS 替换 Ruby Sass,现在我的 CSS 转换只需 2-3 秒。看一看我漂亮的新代码。我是用了 Responsive Typography, Autoprefixer,以及棒棒哒 LostGrid

PostCSS

在教程的这部分,我将撕开 Ruby Sass 并加入 PostCSS 作为替代。所以跟我一起做。。。

首先,安装所有必需的 Node 包:

我只添加了一些基础插件,但稍后如果您喜欢,您可以添加更多。我添加了 gulp-postcssprecss ( 允许 类Sass 语法 ), gulp-cssnano ( 压缩并优化 CSS ),autoprefixer 用来自动化添加供应商前缀,以及 css-mqpacker 用来组合媒体查询。

接下来添加新任务的配置:

添加新任务到 development 文件夹:

重命名 SCSS 文件及文件夹

我将 scss 文件夹重命名为 styles 并在其中创建一个新的文件夹 partials 。重命名所有 .scss 文件为 .css 并将它们移动到 partials 文件夹 ( 除了 main.css )。我建议现在注释掉这个文件中的所有行,稍后再恢复回来。否则它将无法正确运行,因为一些语法是不同的。

更新代码

接下来,我们需要使用我们新的 styles 任务替换老 sass 任务的一些行。如果您从没看过 DIFF 文件:行首的一个 - (红色行) 是被删除的内容,行首的一个 + ( 绿色行 ) 是被添加的内容:

gulp/config.js:132

gulp/config.js:154

gulp/tasks/development/watch.js:9

gulp/tasks/development/build.js:11

gulp/tasks/production/build.js:10

gulp/tasks/development/base64.js:8

optimize-css.js 任务中删除这些行,因为 cssnano 已经做了这些工作:

gulp/tasks/production/optimize-css.js:2

gulp/tasks/production/optimize-css.js:7

gulp/tasks/production/optimize-css.js:11

FontCustom 已经被修改为复制矢量字体 CSS 到新的位置并提供 CSS 而不是 SCSS:

fontcustom.yml:34

fontcustom.yml:48

更新完 FontCustom 配置后,运行该任务以重新创建矢量字体:

不同的 PostCSS 插件的语法也不同。我使用 PreCSS,它的语法很像 Sass ,但是有些地方有少许不同。为了写下我做的所有修改,将超出本教程的范围,因为他是一个非常长的文件。但是您可以看一下,我如何使用更新的语法重构所有 CSS 文件,在我的 GitHub仓库。如果您感兴趣我如何使用 LostGrid 替换 Singularity ( 仍然是最好的可用 Sass 栅格 ) 以及所有其他东西,查看 我的网站源码

您现在可以再次运行 gulp , PostCSS 将处理样式文件。

使用 PostCSS 插件对 CSS 进行语法检查

我们当然想编写干净漂亮的样式表。这就是为什么我们总是要运行语法检查器来检查我们的 CSS 。

到目前为止, Gem 负责了这个工作,检查 SCSS 语法的错误。但是现在我们使用 CSS ,故需要一个更好(并且更快)的解决方案。

首先安装所需的 Node 包:

现在我们添加语法检查器的配置到 Gulp 的配置文件:

监听所有 CSS 文件,除了 FontCustom 和 Sprites 生成的那些,与语法高亮的样式文件(我们无法控制它)。

您可以定义 stylelint 的语法检查规则。上面的五个规则只是个例子,还有 很多其他的。因为 CSS 样式完全是看个人喜好,您可以挑选您喜欢的。 意味着忽略(默认), 1 是警告, 2 是错误。一些规则需要附加的配置。

接下来增加 Gulp 任务:

现在我们需要做的就是在 watch 任务中替换调用的语法检查任务:

gulp/tasks/development/watch.js:9

如果您运行 gulp ,这个任务将检查您的 CSS 文件,当您保存他们时,并在终端中展示错误所在的文件名,行号以及错误原因。 PostCSS 甚至提供了一个 插件 用以从错误跳转到您的浏览器。

PostCSS 的未来是最光明的。因为它很受欢迎,人们都相当喜欢它。像 Google, Twitter, Alibaba 和 Shopify 这些公司已经在使用 PostCSS 。而且 Bootstrap v5 将很可能使用 PostCSS 。

我相信在未来我们将看到更多亦可赛艇(Exciting)的插件。

源码

查看Github上的源码

总结

Gulp.js 系列教程的第16部分结束了。我们学习了如何使用 PostCSS 来处理我们的 CSS 文件,以及如何使用 Stylelint 来检查 CSS 文件的错误。

发表评论

电子邮件地址不会被公开。 必填项已用*标注