在上一篇文章中,我们介绍了如何在CodePen和Prepros中使用PostCSS。虽然里面的选项设置可以让你第一时间接触和使用PostCSS,但也有很多PostCSS插件限制你不能使用。
这篇教程将告诉你如何在 Gulp 配置中使用PostCSS插件,而且可以根据你自己需要的去配置所要的插件。这才是真正的进入到PostCSS插件生态系统中。
特别声明:如果你从未接触或使用命令来配置Gulp的任务,我建议你在阅读本教程之前先阅读前面我写的系列教程:《 网页设计的命令操作 》。
鉴于我们将需要使用Gulp,在开始后面的内容之前,我假设你的电脑本地环境已经具备了下面列出来的条件:
如果你无法确认你的电脑本地系统是否安装了这些,建议你跟着 这篇教程 操作一回,因为这些条件是我们进入教程后面必备条件。
当然你也可以先 阅读这篇教程 ,确保你对Gulp的基本操作有所了解。此外,按照教程中的“Gulp安装项目”部分,确保你的项目文件夹中有以下面所列文件:
gulpfile.js
文件 package.json
文件 gulp install
会有一个 node_modules
文件夹 其实这些内容在网上一搜一大把,为了初学者更好的阅读接下的内容,这里提供一些参考文档。
首先在你的项目中创建两个文件夹,一个命名为 src
,另一个命名为 dest
。 src
文件夹用来放置未处理的CSS文件,而 dest
用来放置PostCSS插件处理后的文件。
接下来需要做的就是在你的项目中安装 gulp-postcss 插件,安装好之后就可以使用POstCSS处理器。
在安装之前,配置一下 package.json
文件:
{ "name": "testPostCSS", "version": "0.0.1", "description": "test PostCSS gulp plugin", "keywords": [ "gulpplugin", "PostCSS", "css" ], "author": "damo", "license": "MIT", "dependencies": { "postcss": "^5.0.0", "gulp": "~3.8.10" }, "devDependencies": { "gulp-postcss": "^6.0.1" } }
打开你的命令终端,并且进入到你的项目根目录下,然后在命令终端输入下面的命令:
npm install --save-dev gulp-postcss
注:如果上面命令无法正常安装,建议在上面的命令前加上 sudo
:
sudo install --save-dev gulp-postcss
运行完上面命令之后,如果没出任何差错,在你的终端命令中可以看到类似下图的提示:
安装完成后你的项目结构看起来就应该像这样:
现在通过编辑器打开 gulpfile.js
文件,并且创建 gulp
和 gulp-postcss
变量,如下面代码所示:
var gulp = require('gulp'); var postcss = require('gulp-postcss');
我们现在可以设置一个任务,让PostCSS读取CSS原文件并且处理它。
添加的代码如下:
gulp.task('css', function () { var processors = [ ]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); });
我们一起来看一下上在的代码。在第一行,设置了一个任务名叫 css
。这个任务将会执行一个函数,同时在这个函数中创建了一个名为 processors
的数组。现在这个数组为空,这里将插入我们想使用的PostCSS插件。
在 processors
数组后面,我们指定了需要处理的目标文件,即 src
目录中的任何CSS文件。
这里面使用了两个 .pipe()
函数,设置 postcss()
执行PostCSS,并且给 postcss()
传递 processors
参数,后面会告诉PostCSS要使用哪个插件。
接下来的第二个 .pipe()
函数,指定结过PostCSS处理后的CSS放置在 dest
文件夹中。
在 src
目录中创建一个测试文件 style.css
,并在这个文件中添加一些CSS的测试代码:
.test { background: black; }
现在在命令终端的项目目录下执行下面的命令:
gulp css
这是刚才设置的任务,执行完上面的任务之后,在 dest
目录中可以找到一个新的 style.css
文件。
当你打开这个新文件后,你可以看到和你的源文件一样的代码。使用的代码并没有任何的改变,那是因为我们还没有使用任何的PostCSS插件。从先前的教程中,你就会知道它的插件实际上是会对CSS执行操作的。
现在我们添加需要的PostCSS插件: Autoprefixer (处理浏览器私有前缀), cssnext (使用CSS未来的语法), precss (像Sass的函数)。
运行下面的命令,将插件安装到你的项目:
npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev
其实也可以在命令中执行下面的代码,也可以达到相同的效果:
npm install autoprefixer cssnext precss --save-dev
注:安装 cssnext
和 precss
时需要一段时间,因为他们包括了多个插件。
接下来,在我们的项目中定义变量,将这些插件加载到我们的项目中。和前面的方式一样,在 gulpfile.js
文件中添加下面的代码:
var autoprefixer = require('autoprefixer'); var cssnext = require('cssnext'); var precss = require('precss');
然后将这三个插件添加到 processors
数组中,更新后的数组如下:
var processors = [ autoprefixer, cssnext, precss ];
三个插件已结添加到了 processors
数组中了,这个时候PostCSS会知道将这些插件功能应用到我们的CSS源文件中。
我们现在可以给 src/style.css
文件中添加一些测试文件和检测他们的工作。删除测试文件中以前的代码,并添加新的CSS样式代码:
/* Testing autoprefixer */ .autoprefixer { display: flex; } /* Testing cssnext */ .cssnext { background: color(red alpha(-10%)); } /* Testing precss */ .precss { @if 3 < 5 { background: green; } @else { background: blue; } }
在命令终端执行 gulp css
命令。在 dest
目录生成的文件会有下面的代码:
/* Testing autoprefixer */ .autoprefixer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* Testing cssnext */ .cssnext { background: rgba(255, 0, 0, 0.9); } /* Testing precss */ .precss { background: green }
如上面编译出来的代码你应该看到了Autoprefixer给需要的属性添加了浏览器的私有前缀,第二个任务cssnext将颜色转换成 rgba()
,第三部分PreCSS检查了 @if @else
,编译符合需求的代码。
注:如果你想为一个插件配置选项参数,你可以在插件后面添加一对括号,并在里面传递选项的参数。例如,Autoprefixer需要指定对应的浏览器列表参数,你可以像这样设置:
var processors = [ autoprefixer({browsers: ['last 1 version']}), cssnext, precss ];
PostCSS最美之处就是可以将插件根据自己的需要做任意的组合。这对于确保其他的人希望在一个项目中有相同的PostCSS插件设置时,就提出了一个很大的挑战。这得感谢 npm
,我们可以通过他来管理插件依赖关系。
因为我们安装插件到项目中使用了 --save-dev
标志,在安装时会自动将依赖文件写入项目的 package.json
文件中。这意味着如果你想和他人分享你的项目,他们可能在命令终端运行 npm install
命令,就可以自动安装分享的插件。
有关于更多关于 npm
依赖关系管理的信息,你可以 点击这里 进行更多的了解。
接下来做个简单的总结:
npm
创建项目,并且将 gulp
安装到 gulpfile
文件 gulp-postcss
插件 gulpfile.js
文件,将 gulp
和 gulp-postcss
加载到项目中 processors
数组 .pipe()
是设置一个 postcss()
函数,并且将 processors
传递给它 你可以根据上面的教程介绍,遵循相同的步骤,你可以将PostCSS任何插件安装到项目中。
npm install <plugin_name>
--save-dev 命令将插件安装到你的项目中 var autoprefixer = require("autoprefixer")
代码在你的 gulpfile.js
文件中定义要加载的插件变量名 preprocessors
数组中 如果你感兴趣,可以 点击这里 将示例所有代码下载下来。
在接下来的一节内容中,我们将一起讨论在项目中如何使用Grunt来配置PostCSS。
本文根据 @Kezz Bracey 的《 PostCSS Quickstart Guide: Gulp Setup 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-gulp-setup--cms-24543 。
常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。