您的位置:新葡亰496net > 新葡亰官网 > PostCss使用方法,PostCSS深入学习

PostCss使用方法,PostCSS深入学习

发布时间:2019-10-06 07:04编辑:新葡亰官网浏览(167)

    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应时而生。那开端大家的读书之旅吧:

    我们在管理网页的时候,往往会遇上宽容性的主题材料。在那些主题材料上分为五个大的主旋律:显示器自适应&浏览器宽容。而荧屏自接纳的法子有多数,满含框架之类的,可是浏览器的合营却从未五个号的框架。在我们平常管理中,会使用质量宽容(*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

    一经你不或者肯定你的微型Computer本地系统是或不是安装了这个,建议您跟着那篇教程操作叁次,因为那几个条件是我们进去教程后边必备条件。

    自然你也足以先开卷那篇教程,确认保证您对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 有数百个属性缩写的插件
    新葡亰496net,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 套件管理工科具
    • 居尔p开采教程
    • 前端创设筑工程具gulp入门教程

    新葡亰496net 1

    一:希图专业:

    安装插件

    让大家先从主旨插件的装置入手。大家就要选择short-color插件。这么些插件主要成就对color属性的扩充,使其得以把第4个颜色值用于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

    运转完下面命令之后,要是没出任何过错,在您的顶峰命令中得以见见类似下图的提拔:

    新葡亰496net 2

    设置到位后您的档期的顺序布局看起来就相应像那样:

    新葡亰496net 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。那一个职务将会执行一个函数,同期在这几个函数中开创了多个名称叫processorsPostCss使用方法,PostCSS深入学习。的数组。以往以此数组为空,这里将插入大家想行使的PostCSS插件。

    processors数组前边,大家钦定了急需管理的目标文件,即src目录中的任何CSS文件。

    那其间使用了四个.pipe()函数,设置postcss()执行PostCSS,并且给postcss()传递processors参数,前边会报告PostCSS要选用哪个插件。

    接下去的第2个.pipe()函数,内定结过PostCSS管理后的CSS放置在dest文本夹中。

    二:gulp以及postcss相关插件的设置的设置
    展开你的命令符小黑窗(window 凯雷德),输入CMD,然后到你的根目录下,如下图:

    要想用PostCSS,须要您的管理器上保障安装了npm,node,gulp,

    安装八个插件

    只设置贰当中坚插件对工作支持相当小。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

    PostCss使用方法,PostCSS深入学习。gulp css

    1
    2
    gulp css
     

    新葡亰496net 4

    那是刚刚设置的任务,实践完上面的任务之后,在dest目录中得以找到一个新的style.css文件。

    当您展开那一个新文件后,你能够观看和您的源文件同样的代码。使用的代码并未任何的更改,那是因为大家还从未选用任何的PostCSS插件。从先前的学科中,你就能知晓它的插件实际上是会对CSS实行操作的。

    新葡亰496net 5

    第一新建一个文本夹,小编取名称为Postcss1,在文件目录下新建贰个package.json(用来保存安装插件音讯),gulpfle.js(用来编排命令),dest文件(用来存放在处理后的css文件)以及src文件(用来寄存原始css文件),如下图:

    插件的实施各类

    末段一节讲一下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(百分之七十))不通晓怎么处理。然后才实行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里面晤面世这么的装置音讯:

    新葡亰496net 6

    总结

    本文已经介绍了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
    ];

    新葡亰496net 7

     

    享用你的花色

    PostCSS最美之处正是能够将插件依据自个儿的内需做大肆的组成。这对于保证别的的人期望在二个连串中有一样的PostCSS插件设置时,就提出了八个相当大的挑衅。那得多谢npm,大家得以经过他来保管插件注重关系。

    因为大家设置插件到品种中应用了--save-dev标识,在安装时会自动将借助文件写入项目标package.json文本中。那表示一旦您想和别人分享你的品类,他们或许在指令终端运维npm install一声令下,就足以自动安装分享的插件。

    有关于更加的多关于npm依据关系管理的消息,你能够点击这里拓宽越多的问询。

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

     二:gulp以及postcss相关插件的安装的安装

    来总括一下

    接下去做个简易的计算:

    • 通过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数组中

    假诺您感兴趣,能够点击这里将示例全体代码下载下来。

    新葡亰496net 8

    展开你的通令符小黑窗(window PAJERO),输入CMD,然后到您的根目录下,如下图:

    下一节:Grunt PostCSS

    在接下去的一节内容中,我们将一齐商量在品种中怎么样行使Grunt来安插PostCSS。

    1 赞 1 收藏 评论

    新葡亰496net 9

    嗯,恭喜你啊,小家伙。你安装成功了,然后我们再设置postcss以及相关的插件,
    三番两次在命令行里输入:npm install postcss autoprefixer cssnext precss --save-dev
    设置成功,在package.json里面包车型大巴音信会化为:

    新葡亰496net 10

    新葡亰496net 11

    接下来大家输入npm install gulp --save-dev,此步骤为gulp的设置; 

    连锁插件已经安装成功;接下去进行第三步:

    设置成功之后,在package.json里面会并发那样的安装新闻:

    三:进行gulpfle.js的配置:
    在js文件中,大家先是创立连锁的变量:

    新葡亰496net 12

    var gulp = require('gulp');

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

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

    新葡亰496net 13

    var autoprefixer = require('autoprefixer');

     

    var cssnext = require('cssnext');

    啊,恭喜你哟,小家伙。你安装成功了,然后大家再设置postcss以及相关的插件,

    var precss = require('precss');

    后续在命令行里输入:npm install postcss autoprefixer cssnext precss --save-dev

    我们明日得以安装四个任务,让PostCSS读取CSS原著件而且处理它:

    设置成功,在package.json里面包车型地铁音讯会变成:

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

    新葡亰496net 14

    var processors = [autoprefixer, cssnext, precss];

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

    return gulp.src('./src/*.css').pipe(postcss(processors)).pipe(gulp.dest('./dest'));

     

    });

    三:进行gulpfle.js的配置:

    大家一并来看一下方面的代码。在首先行,设置了二个职务名称为css。那么些职分将会进行三个函数,同偶尔间在这么些函数中创建了三个名字为processors的数组。将方面创造的变量增添到数组在那之中,这里将插入我们想选用的PostCSS插件。
    在processors数组前面,我们钦点了急需管理的目的文件,即src目录中的任何CSS文件。
    那其间使用了四个.pipe()函数,设置postcss()试行PostCSS,并且给postcss()传递processors参数,前边会告知PostCSS要动用哪个插件。
    接下去的第二个.pipe()函数,钦赐结过PostCSS管理后的CSS放置在dest文件夹中。

    在js文件中,我们第一成立连锁的变量:

    下一场大家须求三个检查测验的函数,当原始文件退换时,管理公事也随之发生相关的变动,代码如下:
    1
    2
    3
    4

    var gulp = require('gulp');
    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');
    var cssnext = require('cssnext');
    var precss = require('precss');
    

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

     我们今日得以设置叁个职务,让PostCSS读取CSS原来的文章件并且管理它:

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

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

    });

      

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

    我们一并来看一下方面包车型大巴代码。在率先行,设置了一个任务名字为css。那个职务将会试行三个函数,同一时间在那一个函数中开创了贰个名称叫processors的数组。将上面成立的变量增添到数组其中,这里将插入大家想行使的PostCSS插件。

    四:运行:
    我们只须求在命令行里输入gulp css就能够运维:
    src文件下的css:

    在processors数组前边,大家钦命了须求管理的对象文件,即src目录中的任何CSS文件。

    新葡亰496net 15

    那当中使用了五个.pipe()函数,设置postcss()实施PostCSS,而且给postcss()传递processors参数,前边会告诉PostCSS要利用哪个插件。

    试行命令行dest上边包车型大巴css:

    接下去的第3个.pipe()函数,钦赐结过PostCSS管理后的CSS放置在dest文件夹中。

    新葡亰496net 16

     

    然后我们必要一个检验的函数,当原始文件更动时,管理公事也随着发生相关的改造,代码如下:

    gulp.task('watch', function () {
        gulp.watch('./src/*.css', ['css']);
    });
    gulp.task('default', ['watch', 'css']);
    

      

    四:运行:

    笔者们只要求在指令行里输入gulp css即可运营:

    src文件下的css:

    新葡亰496net 17

    推行命令行dest上面包车型客车css:

    新葡亰496net 18

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:PostCss使用方法,PostCSS深入学习

    关键词:

上一篇:前景的编码格局,PostCss使用办法

下一篇:没有了