如何构成Gulp使用PostCss,在gulp构建工具中采取P

时间:2019-10-07 07:31来源:编程技术
PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS语法,内联图像等等。PostCSS的目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的

PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。PostCSS的目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的原则,PostCSS把扩展的语法和特性转换成现代的浏览器友好的CSS。使用Gulp工具,我们可以通过构建过程转换样式,就像Sass和Less的编译。

前言

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

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

图片 1MacDown logo

创建项目

在开始之前,首先创建一个项目文件夹。该文件夹里创建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  包管理文件

PostCSS现在已经普及了一段时间,如果您还没有使用过它或不知道PostCSS是什么,那么我建议您看看这篇PostCSS简介,该文章介绍了PostCSS的基础知识,包括如何安装和使用一些PostCSS插件。

安装插件

让我们先从基本插件的安装入手。我们将要使用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;}

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

在本教程中,我将向您展示如何结合Gulp使用PostCSS,一个流行的自动化工具。由于这篇文章不是一个关于Gulp的入门教程,所以我不会涵盖Gulp的基础知识。但为了快速入门,您可以看看这篇Gulp.js简介。

安装多个插件

只安装一个基本插件对工作帮助不大。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);}

在开始本教程之前,你应该创建一个项目文件夹用来工作。该文件夹内应该已经安装了Gulp以及两个内部文件夹,名称分别为“initial”和“final”(或您选择的其它名称)。所谓的“initial”的文件夹将存放你的原材料和未加工的CSS代码。 “initial”文件夹将存放处理过的文件,随时可以使用。

插件的执行顺序

最后一节讲一下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

原文链接:

npm install gulp-postcss --save-dev

PS: --save-dev补充:表示将正在安装的插件作为依赖添加到project.json文件里。这将对多人合作模式有很大的帮助。当其他开发人员运行npm install在软件包安装命令,所有的插件将被自动安装。

此时你的文件夹结构应该是:

  • initial —您的原始CSS文件的文件夹。

  • style.css —未处理的css样式,我们将在稍后进行编辑。

  • final — 处理过的css文件的文件夹

  • node_modules — 所有NPM模块的文件夹

  • gulp — 当你安装Gulp时创建的文件夹

  • gulp-postcss —运行上面的命令后创建的文件夹。

  • guplfile.js —你的 Gulp文件

  • package.json —你的 package.json 文件

开始之前,我们先安装一些基本的插件。我们将要使用的插件是 short-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; var postcss = require('gulp-postcss'); var shortColor = require('postcss-short-color');

现在,让我们建立一个gulp任务来处理我们的原始的CSS文件,并创建一个准备就绪的样式表。下面是代码这样做:

gulp.task('css', function () { return gulp.src('initial/*.css') .pipe(postcss([shortColor])) .pipe(gulp.dest; }); 

我首先创建一个名为CSS的任务。当你要运行相应的功能时可以用到这个名字。您可以在gulp.src()内部指定要处理的文件。使用*的CSS将处理“intial”文件夹内所有的CSS文件。

接下来,我们使用pipe()函数来调用我们的所有插件。要做到这一点,我们需要将所有的插件作为参数传递给postcss()函数。在我们的基本的例子中,我们实际上只有一个插件需要传递。 在下一节,我会告诉你如何传递多个插件。插件通过管道后,gulp.dest()将被用于设置处理的文件的目的地。

为了测试,如果一切已正确设置,在“initial”文件夹内创建一个style.css文件。 style.css文件将有以下的CSS:

section { color: white black;}

接下来,你需要在你的终端里运行gulp css命令。此刻,在您的“final”文件夹内,你应该会看到一个style.css文件,像下面的CSS 一样:

section { color: white; background-color: black;}

如果您CSS的样式和上面所展示的CSS样式一样的话,我们就可以认为一切工作正常。

只使用一个基本的插件并不能从根本上减轻你的工作量。PostCSS有很多令人印象深刻的且令人难以置信的有用的插件,所以在大多数情况下,你需要使用到的插件不止一个。在本节中,我将告诉你如何在工作中同时使用多个插件。

您可能会发现有三个PostCSS插件是非常有用的:即 short, cssnext 和 autoprefixer

  • short将使你少写并且速记大量的CSS属性。 例如:
.heading { font-size: 1.25em 2;}

将会被解析成:

.heading { font-size: 1.25em; line-height: 2;}
  • cssnext能够在你的css样式表中,使用最新的CSS语法。例如,下面的CSS:
.link { color: color(green alpha; }

将被转换为:

.link { background: rgba(0, 255, 0, 0.9); }
  • 最后,autoprefixer将会在您的CSS和转换后的样式文件中添加供应商前缀:
img { filter: grayscale; } 

转换为:

img { -webkit-filter: grayscale; filter: grayscale; } 

现在让我们看看如何安装这些插件,然后用它们来改造我们的样式表。在项目目录下运行下面的命令:

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

我们需要修改我们的gulp task来包含所有这些插件,代替用管道将所有这些插件一个一个的传递,我们将它们存储在易于维护和简洁的阵列。下面是我们的gulpfile.js的代码:

var gulp = require; 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 .pipe(gulp.dest; }); 

您可能已经注意到了,我已经指定了Autoprefixer插件的一些选项。Autoprefixer输出这些选项确定的CSS,在这种情况下,我说的是插件支持所有全球使用量超过1%的浏览器。我也被禁用级联,让所有的前缀和不带前缀属性左对齐。类似的选项也可用于大多数其他插件。

为了测试,如果一切正常,将出在样式表下面的CSS:

.prefix-filter { display: flex; } .cssshort-section { text: #333 bold justify uppercase 1.25em 1.7 .05em; } .cssnext-link { color: color(blue alpha; } .cssnext-link:hover { color: color(orange blackness; }

如果现在在终端中运行gulp css,你应该在“final”文件夹中可以得到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; }

如果你运行的颜色功能插件之前的RGBA-后备插件,就像这样:

var plugins = [ rgbafallback, colorfunction ];

你将得到下面的CSS:

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

正如你所看到的,在处理CSS时没有RGBA回退。这样的异常原因是回退插件运行时,它发现背景是color(orange a,并且不知道该怎么办。后来,color函数插件执行,并从原来的color函数创建RGBA颜色值。

如果你扭转插件顺序,按以下顺序运行它们:

var plugins = [ colorfunction, rgbafallback ]; 

最后的CSS是这样的:

body { background: #ffa500; background: rgba(255, 165, 0, 0.9) }

这一次的颜色插件首先把背景色的RGBA值和后备插件层增加一个十六进制回退。

在本教程中我已经介绍了使用gulp和PostCSS一起使用的基本知识。随着插件和gulp的正确组合,可以节省开发的许多时间和避免不必要的麻烦。如果您有任何技术问题或建议,请尽管在本教程的下面进行评论,以便于我们能更好的学习交流。

原文作者:Nitish Kumar原文链接: MaxLeap 团队_前端研发人员:Ammie Bai

欢迎关注微信订阅号,单纯分享技术干货:从移动到云端欢迎加入我们的MaxLeap活动qq群:555973817,我们将不定期做技术分享活动。

编辑:编程技术 本文来源:如何构成Gulp使用PostCss,在gulp构建工具中采取P

关键词: