澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站PostCss使用方法,在gulp构建工

2019-10-30 作者:澳门新萄京赌场网址   |   浏览(99)

PostCSS深入学习:Gulp设置

2015/10/28 · CSS · POSTCSS

原文出处: Kezz Bracey   译文出处:大漠   

在上一篇文章中,我们介绍了如何在CodePen和Prepros中使用PostCSS。虽然里面的选项设置可以让你第一时间接触和使用PostCSS,但也有很多PostCSS插件限制你不能使用。

这篇教程将告诉你如何在Gulp配置中使用PostCSS插件,而且可以根据你自己需要的去配置所要的插件。这才是真正的进入到PostCSS插件生态系统中。

特别声明:如果你从未接触或使用命令来配置Gulp的任务,我建议你在阅读本教程之前先阅读前面我写的系列教程:《网页设计的命令操作》。

一、PostCss简介

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS(A tool for transforming CSS with JavaScript)。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。从这个角度来说,PostCSS 的强大之处在于其不断发展的插件体系。开发人员也可以根据项目的需要,开发出自己的 PostCSS 插件。

PostCSS 不会单独使用,而是与已有的构建工具配合使用,如 Gulp、Grunt 和 Webpack 都可以。我们只需要选择需要的 PostCSS 插件进行配置。本文主要介绍在Gulp 中使用 PostCSS 的几种常用插件。

我们在处理网页的时候,往往会遇到兼容性的问题。在这个问题上分为两个大的方向:屏幕自适应&浏览器兼容。而屏幕自使用的方法有许多,包括框架之类的,但是浏览器的兼容却没有一个号的框架。在我们日常处理中,会使用属性兼容(*background,_background...),前缀兼容(-webkot-,-oz-,-o-...)以及注释兼容([if it ie...])。方法啊很多,但是我们却要挨个去加这些属性,难免会拖慢我们的效率。这样的情况下,PostCSS应运而生。那开始我们的学习之旅吧:

前言

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

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

需要的条件

鉴于我们将需要使用Gulp,在开始后面的内容之前,我假设你的电脑本地环境已经具备了下面列出来的条件:

  • node.js
  • NPM
  • Git

如果你无法确认你的电脑本地系统是否安装了这些,建议你跟着这篇教程操作一回,因为这些条件是我们进入教程后面必备条件。

当然你也可以先阅读这篇教程,确保你对Gulp的基本操作有所了解。此外,按照教程中的“Gulp安装项目”部分,确保你的项目文件夹中有以下面所列文件:

  • 一个gulpfile.js文件
  • 一个package.json文件
  • 根据项目所需安装依赖模块,运行gulp install会有一个node_modules文件夹

二、构建gulp PostCss项目

关于gulp的使用方法,请参考gulp教程,构建步骤:
<pre>
1.npm init
2.npm install gulp gulp-postcss --save-dev
3.npm install autoprefixer --save-dev(添加需要引用的插件)
</pre>
在项目文件夹下新建文件gulpfile.js、文件夹/dest & /src,然后配置gulpfile.js:
<pre>
var gulp = require('gulp');
var postcss = require('gulp-postcss');
// autoprefixer 给某些需要兼容性的属性添加浏览器私有前缀
var autoprefixer = require('autoprefixer');
// cssnext 允许使用CSS的将来版本
var cssnext = require('cssnext');
// precss 检查了@if @else,编译符合需求的代码
var precss = require('precss');
// alias 定义自己的速写或"别名"
var alias = require('postcss-alias');
// postcss-crip 有数百个属性缩写的插件
var crip = require('postcss-crip');
// 创建CSS图形 postcss-circle(创建圆) postcss-triangle(创建三角形)
var circle = require('postcss-circle');
var triangle = require('postcss-triangle');
// 使用 top: center; 来达到垂直居中, left: center; 达到水平居中
var center = require('postcss-center');
gulp.task('css', function() {
var processors = [
autoprefixer,
cssnext,
precss,
alias,
crip,
circle,
triangle,
linkcolor,
center
];
return gulp.src('./src/.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
gulp.task('default', ['css']);
</pre>
配置完成后,我们可以来测试下postcss插件到底能带来什么样的惊喜。
1.在/src目录下新建一个style.css的文件,随便写一个平常我们需要设置浏览器前缀的样式,例如:
<pre>
.demo {
display: flex;
transform: rotate(90deg);
}
</pre>
2.在控制台输入命令gulp css 或者gulp,查看/dest文件夹,发现文件夹下有一个style.css的文件,里面就是通过postcss的autoprefixer插件处理的css代码:
<pre>
.demo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</pre>
再看看其他postcss插件所起到的效果:
1.cssnext 插件允许开发人员在当前的项目中使用CSS将来版本中可能会加入的新特性。cssnext 负责把这些新特性转译成当前浏览器中可以使用的语法cssnext 是一系列与 CSS 将来版本相关的 PostCSS 插件的组合,更多方法可以参考更多cssnext方法。
• 自定义属性的名称以“--”开头。当声明了自定义属性之后,可以在样式规则中使用“var()”函数来引用,如下:
<pre>
.cssnext {
background: color(red alpha(-10%));
}
:root {
--mainColor: red;
}
a {
color: color(var(--mainColor) alpha(90%));
}
编译后的结果:
.cssnext {
background: rgba(255, 0, 0, 0.9);
}
a {
color: rgba(255, 0, 0, 0.9);
}
</pre>
• 自定义选择器,CSS 扩展规范(CSS Extensions)中允许创建自定义选择器,比如可以对所有的标题元素(h1 到 h6)创建一个自定义选择器并应用样式。通过“@custom-selector”来定义自定义选择器。
<pre>
@custom-selector :--style h1, h2, h3, h4, h5, h6;
:--style {
font-weight: bold;
}
编译后的结果:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}
</pre>
• @apply,命名自定义属性中存储一组属性,然后以其他样式引用它们,类似于sass的@extend,需要引用并下载:
<pre>
在gulpfile.js中引用:
var apply = require('postcss-apply');
在控制台输入命令:
npm install postcss-apply --save-dev
</pre>
<pre>
:root {
--my-theme: {
background-color: black;
color: white;
border: 1px solid green;
};
}
.my {
@apply --my-theme;
}
编译后的结果:
.my {
background-color: black;
color: white;
border: 1px solid green;
}
</pre>
• calc()可以使用数学运算中的简单加( )、减(-)、乘(
)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算:
<pre>
在gulpfile.js中引用:
var calc = require('postcss-calc');
在控制台输入命令:
npm install postcss-calc --save-dev
</pre>
<pre>
:root {
--font-size-theme: 14px;
}
body {
font-size: var(--font-size-theme);
}
div {
font-size: calc(var(--font-size-theme) x 2);
height: calc(50px - 1em);
margin-bottom: calc(var(--font-size-theme) x 1.5);
}
编译后的结果:
body {
font-size: 14px;
}
div {
font-size: 28px;
height: calc(50px - 1em);
margin-bottom: 21px;
}
</pre>
2.使用纯CSS来创建形状,如postcss-circle & postcss-triangle,创建圆形和三角形的语法:
<pre>
.circle {
circle: size color
}
.triangle {
triangle: pointing-<up|down|left|right>;
width: <length>;
height: <length>;
background-color: <color>;
}
</pre>
postcss有许多有趣的插件,有兴趣的可以去github上查看相关的plugin,然后尝试使用。

一:准备工作:
要想用PostCSS,需要你的电脑上确保安装了npm,node,gulp,
首先新建一个文件夹,我取名为Postcss1,在文件目录下新建一个package.json(用来保存安装插件信息),gulpfle.js(用来编写命令),dest文件(用来存放处理后的css文件)以及src文件(用来存放原始css文件),如下图:

创建项目

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

扩展教程

其实这些内容在网上一搜一大把,为了初学者更好的阅读接下的内容,这里提供一些参考文档。

  • 在 Windows、Mac OS X 與 Linux 中安裝 Node.js 網頁應用程式開發環境
  • Node.js 安装配置
  • NPM 套件管理工具
  • Gulp开发教程
  • 前端构建工具gulp入门教程

澳门新萄京官方网站 1

安装插件

让我们先从基本插件的安装入手。我们将要使用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在Gulp中的基本配置

首先在你的项目中创建两个文件夹,一个命名为src,另一个命名为destsrc文件夹用来放置未处理的CSS文件,而dest用来放置PostCSS插件处理后的文件。

接下来需要做的就是在你的项目中安装gulp-postcss插件,安装好之后就可以使用POstCSS处理器。

在安装之前,配置一下package.json文件:

JavaScript

{ "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" } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "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"
  }
}

打开你的命令终端,并且进入到你的项目根目录下,然后在命令终端输入下面的命令:

JavaScript

npm install --save-dev gulp-postcss

1
npm install --save-dev gulp-postcss

注:如果上面命令无法正常安装,建议在上面的命令前加上sudo

JavaScript

sudo install --save-dev gulp-postcss

1
sudo install --save-dev gulp-postcss

运行完上面命令之后,如果没出任何差错,在你的终端命令中可以看到类似下图的提示:

澳门新萄京官方网站 2

安装完成后你的项目结构看起来就应该像这样:

澳门新萄京官方网站 3

现在通过编辑器打开gulpfile.js文件,并且创建gulpgulp-postcss变量,如下面代码所示:

JavaScript

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

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

我们现在可以设置一个任务,让PostCSS读取CSS原文件并且处理它。

添加的代码如下:

JavaScript

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

1
2
3
4
5
6
7
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文件夹中。

二:gulp以及postcss相关插件的安装的安装
打开你的命令符小黑窗(window R),输入CMD,然后到你的根目录下,如下图:

安装多个插件

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

测试编译

src目录中创建一个测试文件style.css,并在这个文件中添加一些CSS的测试代码:

JavaScript

.test { background: black; }

1
2
3
.test {
    background: black;
}

现在在命令终端的项目目录下执行下面的命令:

JavaScript

gulp css

1
2
gulp css
 

澳门新萄京官方网站 4

这是刚才设置的任务,执行完上面的任务之后,在dest目录中可以找到一个新的style.css文件。

当你打开这个新文件后,你可以看到和你的源文件一样的代码。使用的代码并没有任何的改变,那是因为我们还没有使用任何的PostCSS插件。从先前的教程中,你就会知道它的插件实际上是会对CSS执行操作的。

澳门新萄京官方网站 5

插件的执行顺序

最后一节讲一下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进制回退。

添加PostCSS插件

现在我们添加需要的PostCSS插件:Autoprefixer(处理浏览器私有前缀),cssnext(使用CSS未来的语法),precss(像Sass的函数)。

运行下面的命令,将插件安装到你的项目:

JavaScript

npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev

1
2
3
4
npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precss --save-dev
 

其实也可以在命令中执行下面的代码,也可以达到相同的效果:

JavaScript

npm install autoprefixer cssnext precss --save-dev

1
npm install autoprefixer cssnext precss --save-dev

注:安装cssnextprecss时需要一段时间,因为他们包括了多个插件。

接下来,在我们的项目中定义变量,将这些插件加载到我们的项目中。和前面的方式一样,在gulpfile.js文件中添加下面的代码:

JavaScript

var autoprefixer = require('autoprefixer'); var cssnext = require('cssnext'); var precss = require('precss');

1
2
3
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');

然后将这三个插件添加到processors数组中,更新后的数组如下:

JavaScript

var processors = [ autoprefixer, cssnext, precss ];

1
2
3
4
5
var processors = [
  autoprefixer,
  cssnext,
  precss
];

三个插件已结添加到了processors数组中了,这个时候PostCSS会知道将这些插件功能应用到我们的CSS源文件中。

我们现在可以给src/style.css文件中添加一些测试文件和检测他们的工作。删除测试文件中以前的代码,并添加新的CSS样式代码:

JavaScript

/* Testing autoprefixer */ .autoprefixer { display: flex; } /* Testing cssnext */ .cssnext { background: color(red alpha(-10%)); } /* Testing precss */ .precss { <a href='; 3 < 5 { background: green; } @else { background: blue; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Testing autoprefixer */
 
.autoprefixer {
  display: flex;
}
 
/* Testing cssnext */
 
.cssnext {
  background: color(red alpha(-10%));
}
 
/* Testing precss */
 
.precss {
  <a href='http://www.jobbole.com/members/jinyi7016'>@if</a> 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

在命令终端执行gulp css命令。在dest目录生成的文件会有下面的代码:

JavaScript

/* 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 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 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,编译符合需求的代码。

然后我们输入npm install gulp --save-dev,此步骤为gulp的安装;
安装成功以后,在package.json里面会出现这样的安装信息:

总结

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

原文:How to Use PostCSS with Gulp

原文链接:

设置插件的选项

注:如果你想为一个插件配置选项参数,你可以在插件后面添加一对括号,并在里面传递选项的参数。例如,Autoprefixer需要指定对应的浏览器列表参数,你可以像这样设置:

JavaScript

var processors = [ autoprefixer({browsers: ['last 1 version']}), cssnext, precss ];

1
2
3
4
5
var processors = [
  autoprefixer({browsers: ['last 1 version']}),
  cssnext,
  precss
];

澳门新萄京官方网站 6

分享你的项目

PostCSS最美之处就是可以将插件根据自己的需要做任意的组合。这对于确保其他的人希望在一个项目中有相同的PostCSS插件设置时,就提出了一个很大的挑战。这得感谢npm,我们可以通过他来管理插件依赖关系。

因为我们安装插件到项目中使用了--save-dev标志,在安装时会自动将依赖文件写入项目的package.json文件中。这意味着如果你想和他人分享你的项目,他们可能在命令终端运行npm install命令,就可以自动安装分享的插件。

有关于更多关于npm依赖关系管理的信息,你可以点击这里进行更多的了解。

在根目录下会出现node_modules的文件目录

来总结一下

接下来做个简单的总结:

  • 通过npm创建项目,并且将gulp安装到gulpfile文件
  • 安装gulp-postcss插件
  • 设置你的gulpfile.js文件,将gulpgulp-postcss加载到项目中
  • 创建一个任务,来编译你的CSS
  • 在任务中,设置一个processors数组
  • .pipe()是设置一个postcss()函数,并且将processors传递给它

你可以根据上面的教程介绍,遵循相同的步骤,你可以将PostCSS任何插件安装到项目中。

  • 通过npm install <plugin_name> –save-dev 命令将插件安装到你的项目中
  • 类似var autoprefixer = require("autoprefixer")代码在你的gulpfile.js文件中定义要加载的插件变量名
  • 将变量名添加到你的preprocessors数组中

如果你感兴趣,可以澳门新萄京官方网站PostCss使用方法,在gulp构建工具中使用PostCSS。点击这里将示例所有代码下载下来。

澳门新萄京官方网站 7

下一节:Grunt PostCSS

在接下来的一节内容中,我们将一起讨论在项目中如何使用Grunt来配置PostCSS。

澳门新萄京官方网站PostCss使用方法,在gulp构建工具中使用PostCSS。 1 赞 1 收藏 评论

澳门新萄京官方网站 8

嗯,恭喜你啊,小伙子。你安装成功了,然后我们再安装postcss以及相关的插件,
继续在命令行里输入:npm install postcss autoprefixer cssnext precss --save-dev
安装成功,在package.json里面的信息会变成:

澳门新萄京官方网站 9

相关插件已经安装成功;接下来进行第三步:

三:进行gulpfle.js的配置:
在js文件中,我们首先创建相关的变量:

var gulp = require('gulp');

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

var autoprefixer = require('autoprefixer');

var cssnext = require('cssnext');

var precss = require('precss');

我们现在可以设置一个任务,让PostCSS读取CSS原文件并且处理它:

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

var processors = [autoprefixer, cssnext, precss];

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文件夹中。

然后我们需要一个检测的函数,当原始文件改变时,处理文件也跟着发生相关的改变,代码如下:
1
2
3
4

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

gulp.watch('./src/*.css', ['css']);

});

gulp.task('default', ['watch', 'css']);

四:运行:
我们只需要在命令行里输入gulp css即可运行:
src文件下的css:

澳门新萄京官方网站 10

执行命令行dest下面的css:

澳门新萄京官方网站 11

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站PostCss使用方法,在gulp构建工

关键词: