來(lái)學(xué)習(xí)一下怎么使用postcss吧

張率功發(fā)布于2019-08-29 11:11 / 2500人閱讀

摘要：如何使用和上面的一樣，加入到即可，如下此處省略行此處省略行此處省略行為了驗(yàn)證插件確實(shí)生效了，修改一下文件，如下執(zhí)行再次重新打包，結(jié)果如下這里就介紹這兩個(gè)插件來(lái)拋磚引玉一下其實(shí)大部分都會(huì)使用已有的一些插件，而很少自己去造輪子。

網(wǎng)上關(guān)于postcss是什么的介紹真的是太多了。。。
簡(jiǎn)單粗暴的說(shuō)，postcss就是一款類似babel的樣式轉(zhuǎn)換器!
多說(shuō)無(wú)益，下面就用一個(gè)demo來(lái)演示一下postcss的用法。

初始化目錄

cd ~/workspace/postcss #進(jìn)入你自己的工具目錄
mkdir postcss
cd postcss
mkidr css
npm init #初始化package.json，一路回車即可

編寫測(cè)試的css文件

進(jìn)入到css目錄，新建一個(gè)index.css文件，鍵入如下內(nèi)容：

button {
    border-radius: 4px;
    transition: all 0.8s;
    color: $red;
    width: 100px;
}

安裝相關(guān)npm包

npm install gulp gulp-postcss --save #安裝需要的包，這里使用gulp來(lái)構(gòu)建、打包

編寫gulpfile.js

postcss文件夾根目錄新建一個(gè)gulpfile.js文件，鍵入如下內(nèi)容：

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

gulp.task("css", function() {
    //postcss處理器列表，暫時(shí)為空
    var processors = [];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

執(zhí)行gulp css，測(cè)試一下打包是否正常！

查看生成的build/index.css文件，和原始文件一樣。
因?yàn)槟壳?b>processors數(shù)組還沒有加入任何插件！

增加autoprefixer插件

修改gulpfile.js，完成后如下：

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

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

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

重新執(zhí)行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: $red;
    width: 100px;
}

增加resolveVar插件

修改gulpfile.js，完成后如下：

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

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

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

function resoleVar(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "color" && decl.value.indexOf("$red") > -1) {
            decl.value = decl.value.replace("$red", "#f00");
        }
        return decl;
    });
}

重新執(zhí)行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 100px;
}

增加px2rem插件

修改gulpfile.js，完成后如下：

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

gulp.task("css", function() {
    var processors = [
        autoprefixer,
        resoleVar,
        px2rem
    ];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

function resoleVar(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "color" && decl.value.indexOf("$red") > -1) {
            decl.value = decl.value.replace("$red", "#f00");
        }
        return decl;
    });
}

function px2rem(css) {
    css.walkDecls(function(decl) {
        if(/d+px/.test(decl.value)) {
            decl.value = decl.value.replace(/d+px/, function(dest) {
                return parseInt(dest) / 20 + "rem";
            })
        }
        return decl;
    });
}

重新執(zhí)行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 0.2rem;
    -o-border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 5rem;
}

經(jīng)過(guò)了上面這三個(gè)簡(jiǎn)單的processor之后，相信大家對(duì)postcss的認(rèn)識(shí)會(huì)更直白一點(diǎn)了吧。。。

postcss插件 autoprefixer

npm install autoprefixer --save

和之前我們自己實(shí)現(xiàn)autoprefixer的類似，只不過(guò)這個(gè)插件做的更好更全一點(diǎn)。

precss

npm install precss --save

press語(yǔ)法和Sass極其相似，你可以毫不費(fèi)力的使用它。

如何使用

和上面的一樣，加入到processors即可，如下：

/**
 * 此處省略N行
 */
var autoprefixer = require("autoprefixer");
var precss = require("precss");
/**
 * 此處省略N行
 */
    var processors = [
        autoprefixer({browsers: ["last 10 version"], cascade: false, remove: false}),
        resoleVar,
        px2rem,
        precss
    ];
/**
 * 此處省略N行
 */

為了驗(yàn)證插件確實(shí)生效了，修改一下css文件，如下：

button {
    border-radius: 4px;
    transition: all 0.8s;
    color: $red;
    width: 100px;
    box-sizing: border-box;
}

.menu {
    a {
        text-decoration: none;
    }
}

執(zhí)行gulp css再次重新打包，結(jié)果如下：

button {
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu a {
    text-decoration: none;
}

這里就介紹這兩個(gè)插件來(lái)拋磚引玉一下！
其實(shí)大部分都會(huì)使用postcss已有的一些插件，而很少自己去造輪子。
當(dāng)然，如果你有這樣的特殊需求或者想學(xué)習(xí)一下，希望上面那三個(gè)例子可以幫到你，大家加油！

GPU云服務(wù)器云服務(wù)器機(jī)器學(xué)習(xí)學(xué)習(xí)吧企業(yè)使用云vps能帶來(lái)哪些好處深度學(xué)習(xí)吧機(jī)器學(xué)習(xí)吧

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111481.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

張率功

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Pycharm 常用快捷鍵大全（上）

閱讀 2534·2021-11-19 09:40
新網(wǎng)雙11：注冊(cè)抽iphone盲盒，郵箱/主機(jī)/網(wǎng)站建設(shè)0元，域名-COM首年16元，CN首年8.8

閱讀 2025·2021-11-08 13:24
GitLab 正式在納斯達(dá)克上市，市值接近 150 億美元

閱讀 2548·2021-10-18 13:24
JWT開發(fā)工具

閱讀 2967·2021-10-11 10:57
如何遠(yuǎn)程連接云主機(jī)名-云主機(jī)怎么遠(yuǎn)程操作？

閱讀 3687·2021-09-22 15:42
FE.TEST-前端測(cè)試初探

閱讀 1196·2019-08-29 17:11
腳本模式創(chuàng)建測(cè)試用例 - Katalon Studio

閱讀 2638·2019-08-29 16:11
來(lái)學(xué)習(xí)一下怎么使用postcss吧

閱讀 2501·2019-08-29 11:11

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

來(lái)學(xué)習(xí)一下怎么使用postcss吧

相關(guān)文章

PostCSS 是個(gè)什么鬼東西？

學(xué)點(diǎn)Webpack吧

談?wù)?em>PostCSS

談?wù)?em>PostCSS

更便捷的css處理方式-PostCSS

發(fā)表評(píng)論

0條評(píng)論

張率功

男|高級(jí)講師

TA的文章

Pycharm 常用快捷鍵大全（上）

新網(wǎng)雙11：注冊(cè)抽iphone盲盒，郵箱/主機(jī)/網(wǎng)站建設(shè)0元，域名-COM首年16元，CN首年8.8

GitLab 正式在納斯達(dá)克上市，市值接近 150 億美元

JWT開發(fā)工具

如何遠(yuǎn)程連接云主機(jī)名-云主機(jī)怎么遠(yuǎn)程操作？

FE.TEST-前端測(cè)試初探

腳本模式創(chuàng)建測(cè)試用例 - Katalon Studio