[翻译]在gulp构建工具中使用PostCSS

前言

PostCSS已经在一段时间内迅速普及，如果你还不知道PostCSS或还没有使用它，我建议你看一下之前的一篇介绍文章《PostCSS简介》，其中介绍了使用PostCSS的基本方法，包括如何安装运行一些插件。

本文，将介绍如何在gulp构建工具中使用PostCSS。因为这不是一篇gulp的教程，所以在这里不介绍如何使用gulp。对于gulp可以参看这篇文章《gulp.js简介》

创建项目

在开始之前，首先创建一个项目文件夹。该文件夹里创建dist和dest文件夹。dist里放所有源文件，dest里放处理过的文件。

接下来用命令行cmd切换到你的项目文件夹，并运行下面命令：

npm install gulp-postcss --save-dev

--save-dev ：安装gulp-postcss插件并且把gulp-postcss插件放到package.json文件的依赖项中。这样可以方便在其它项目中进行部署，其他项目部署，只需要把package.json拷贝过去，并在当前项目中，运行npm install命令，依赖插件会自动安装，方便快捷省时省力。

到这一步你的项目文件夹的结构如下：

dist-源文件夹

style.css 未编译的css样式

dest 目标文件夹

node_modules npm 所有的npm模块文件夹

gulp 安装gulp创建

gulp-postcss 安装gulp-postcss时创建

gulpfile.js gulp的入口文件

package.json 包管理文件

安装插件

让我们先从基本插件的安装入手。我们将要使用short-color插件。这个插件主要完成对color属性的扩展，使其可以把第二个颜色值用于background-color属性。

运行下面的命令安装 short-color

npm install postcss-short-color --save-dev

也可以同时安装gulp-postcss和postcss-short-color，命令如下

npm install gulp-postcss postcss-short-color --save-dev

插件安装完成后，我们要打开gulpfile.js文件，调用插件。首先引用各插件，代码如下

var gulp = require('gulp');

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

var shortColor = require('postcss-short-color');

接下来，创建一个gulp任务来处理dist文件夹下的css文件，并在dest文件夹生成一个编译好的样式文件。代码如下：

gulp.task('css', function () {

  return gulp.src('dist/*.css')

  .pipe(postcss([shortColor]))

  .pipe(gulp.dest('dest'));});

我们创建了一个名叫css的任务，这个任务名称我们将在需要时调用它。可以通过把要处理的文件放到gulp.src()命令中。"*.css"表示dist下所有的css文件。

接下来用，pipe()函数来调用插件。我们把所有插件作为参数传递给postcss()函数。这个例子中我们只传递了一个插件，下一节我们将传递多个插件。在这之后，我们用gulp.dest()函数来批定创建文件的目标文件夹。

如果一切都没问题，我们测试一下，在dist中创建style.css文件。样式如下

section {

  color: white black;}

下面在项目目录下运行命令行命令gulp css。这时你会发现在你的dest文件夹下生成了一个style.css文件，打开后代码如下：

section {

  color: white;

  background-color: black;}

如果你的代码和上面一样，那么这个插件就已经可以使用了。

安装多个插件

只安装一个基本插件对工作帮助不大。PostCSS有一堆有用的插件，大多数时候你不会单独只使用一个。本节，我们来看看怎么使多个插件同时工作。

这里有3个非常有用的PostCSS插件，分别为:short,cssnext和autoprefixer。

short可以让你简写很多CSS样式属性。

例如

.heading {

  font-size: 1.25em 2;}

会转化为

.heading {

  font-size: 1.25em;

  line-height: 2;}

cssnext可以让你使用最新的css语法。例如

.link {

  color: color(green alpha(-10%));}

会转化为

.link {

  background: rgba(0, 255, 0, 0.9);}

最后autoprefixer可以添加css的浏览器前缀

例如：

img {

  filter: grayscale(0.9);}

会转化为

img {

  -webkit-filter: grayscale(0.9);

  filter: grayscale(0.9);}

现在让我们来看看怎么安装并使用它们来转化我们的样式表。

在项目文件夹运行下面的命令

npm install autoprefixer postcss-short postcss-cssnext --save-dev

修改gulpfile.js文件，引用各插件，并在管道里以数组的形式放入所有的插件。gulpfile.js文件代码如下：

var gulp = require('gulp');

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

var autoprefixer = require('autoprefixer');

var cssnext = require('postcss-cssnext');

var shortcss = require('postcss-short');

gulp.task('css', function() {

  var plugins = [

    shortcss,

    cssnext,

    autoprefixer({browsers: ['> 1%'], cascade: false})

  ];

  return gulp.src('initial/*.css')

  .pipe(postcss(plugins))

  .pipe(gulp.dest('final'));});

在这里我们配置了autoprefixer插件，这个配置使插件生成的css文件，支持所有全球份额>1%的浏览器。另外禁用了阶式缩进，让所有的属性左对齐。类似的配置在其它插件里也有效。

以上都就绪了，下面就写一段CSS进行测试。在style.css样式文件中添加以下css样式：

.prefix-filter {

  display: flex;}

.cssshort-section {

  text: #333 bold justify uppercase 1.25em 1.7 .05em;}

.cssnext-link {

  color: color(blue alpha(-10%));}

.cssnext-link:hover {

  color: color(orange blackness(80%));}

在项目文件夹下运行命令行命令gulp css，打开在dest文件夹生成的style.css文件。可以看到以下代码

.prefix-filter {

  display: -webkit-box;

  display: flex;}

.cssshort-section {

  color: #333;

  font-weight: 700;

  text-align: justify;

  text-transform: uppercase;

  font-size: 1.25em;

  line-height: 1.7;

  letter-spacing: .05em;}

.cssnext-link {

  color: #0000ff;

  color: rgba(0, 0, 255, 0.9);}

.cssnext-link:hover {

  color: rgb(51, 33, 0);}

插件的执行顺序

最后一节讲一下PostCSS的清晰的实用性。所有PostCSS的功能都来源于它的插件。有一点要注意，在复杂的项目中，使用多个插件时，插件的执行顺序很重要。

看一下rgba-fallback和color-function这两个插件。rgba-fallback会把rgba格式转化成16进制格式，color-function会把css里的color()函数转化成兼容的CSS值。比如你有下面这段css

body {

  background: color(orange a(90%));}

如果你把rgba-fallback插件放在color-function插件前，如下

var plugins = [

  rgbafallback,

  colorfunction

];

你将会得到下面的样式

body {

  background: rgba(255, 165, 0, 0.9);}

这里并没有对rgba进行16进制的转化。这是因为在rgba-fallback插件在处理backgrround时发现color(orange a(90%))不知道怎么处理。然后才执行color-function把颜色函数转化为rgba颜色值。

改变一下插件顺序，按下面的顺序执行

var plugins = [

  colorfunction,

  rgbafallback

];

最终的CSS如下

body {

  background: #ffa500;

  background: rgba(255, 165, 0, 0.9)}

首先color-function先把background的color转化为rgba值，然后用rgba-fallback函数进行16进制回退。

总结

本文已经介绍了gulp和PostCSS配合的基本方法。利用高效的gulp和插件的组合，可以大大节约你开发的时间和不必要的兼容问题。

原文:How to Use PostCSS with Gulp

原文链接：http://www.sitepoint.com/how-to-use-postcss-with-gulp/

巴特西

[翻译]在gulp构建工具中使用PostCSS

前言

创建项目

安装插件

安装多个插件

插件的执行顺序

总结

最新文章

热门文章