PostCSS快速入门使用.PDFVIP

PostCSS快速入门使用 PostCSS 是一套利用JS插件实现的用来改变CSS的工具.这些插件 够支持变量和混合语法，转换未来CSS语法，内联图片，还 有更多 初初识识PPoossttCCSSSS 如果你第一次听说 PostCSS 这个东西，那么请看下面摘 自官方 Github 的介绍： PostCSS is a tool for transforming CSS with JS Plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more 翻译成中文的意思如下： PostCSS 是一套利用JS插件实现的用来改变CSS的工具.这些插件 够支持变量和混合语法，转换未来CSS语法，内联图片，还 有更多 我们用过 Less 、 SASS 等工具来对CSS做 预处理 操作，按照它们约定的语法来书写并且最终转换成可用的样式，这付出的 代价是必必须须先先熟熟悉悉这这个个工工具具的的书书写写语语法法。 随着近几年 Grunt、Gulp、Webpack 等 自动化工具的兴起， 组合式应用 变得非常的热门，那 PostCSS 存在的意义是什么呢？ 答案是：CCSSSS生生态态系系统统 PostCSS 拥有非常多的插件，诸如 自动为CSS添加浏览器前缀的插件 autoprefixer 、当前移动端最常用的 px 转 rem 插 件 px2rem ，还有支持尚未成为CSS标准但特定可用的插件 cssnext ，还有很多很多。就连著名的 Bootstrap 在下一个版 本 Bootstrap 5 也将使用 PostCSS 作为样式的基础。 一句话来概括PostCSS：CCSSSS编编译译器器 够够做做到到的的事事情情，，它它也也可可以以做做到到，，而而且且 够够做做得得更更好好 快快速速使使用用PPoossttCCSSSS 上面大致介绍了 PostCSS ，也许我们并没有在头脑里形成对它的认知，那下面我们就通过一个简单地实例来看看如何使 用 PostCSS 。 PostCSS 得益于插件，支持Grunt,Gulp,webpack,Broccoli,Brunch还有ENB，这里我们将以 Gulp 作为实例来讲。 环环境境准准备备 创建并进入我们的实例 目录 1. mkdir postcss demo cd postcss demo 然后快速生成 package.json 文件 1. # yes 参数 够帮助我们快速生成默认的package.json 2. npm init yes 将上面创建的 package.json 文件的 main 参数改为 gulpfile.js ，然后安装我们所需的依赖 1. # gulp跟gulp postcss是必须的，后面两个插件为了演示用途 2. npm i gulp gulp postcss autoprefixer autoprefixer core cssnext save dev d 创建 gulpfile.js 1. # 这里用命令行进行创建，你也可以手动新建 2. touch gulpfile.js 修修改改gguullppffiillee..jjss 将下面代码贴进 gulpfile.js 1. var gulp = require(gulp); 2. var postcss = require(gulp postcss); 3. var autoprefixer = require(autoprefixer); 4 . var cssnext = require(cssnext); 5. 6. //定义css任务 7. gulp.task(css, function(){ 8. //定义postcss任务流数组 9.