公告

postcss的安装与使用

我是经过公司另外一个同事推荐的这个

他是一个资深的大哥哥我觉得我确实需要跟多的学习和成长而且我觉得我应该听他的话多学学新知识

最近一直在做适配的网站会出现很多媒体查询我发现用这个写媒体查询会很方面开发能很大的提升开发速度

于是我今天特意来公司（在家里没有学习的心思就只想吃东西但是我今天在公司还是吃了很多零食）

我费了九牛二虎之力还是没有弄好于是乎我开始弄less 发现很好弄但是我还是不想死心

就在我心灰意冷的时候发现了一篇文章虽然我也好复制但是还是要把原作地址写出来

https://segmentfault.com/a/1190000006735589#articleHeader0

下面我开始ctrl + c and ctrl + v 了因为他写的有一写很死的东西我想粘出来后续做修改

初始化目录

cd ~/workspace/postcss #进入你自己的工具目录
mkdir postcss
cd postcss
mkidr css
npm init #初始化package.json，一路回车即可

编写测试的css文件

进入到css目录，新建一个index.css文件，键入如下内容：

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

安装相关npm包

npm install gulp gulp-postcss --save #安装需要的包，这里使用gulp来构建、打包

编写gulpfile.js

postcss文件夹根目录新建一个gulpfile.js文件，键入如下内容：

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

gulp.task('css', function() {
    //postcss处理器列表，暂时为空
    var processors = [];
    return gulp.src('./css/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./build/'));
});

执行gulp css，测试一下打包是否正常！

查看生成的build/index.css文件，和原始文件一样。
因为目前processors数组还没有加入任何插件！

增加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;
    });
}

重新执行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;
    });
}

重新执行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;
    });
}

重新执行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;
}

经过了上面这三个简单的processor之后，相信大家对postcss的认识会更直白一点了吧。。。

postcss插件

autoprefixer

npm install autoprefixer --save

和之前我们自己实现autoprefixer的类似，只不过这个插件做的更好更全一点。

precss

npm install precss --save

press语法和Sass极其相似，你可以毫不费力的使用它。

如何使用

和上面的一样，加入到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行
 */

为了验证插件确实生效了，修改一下css文件，如下：

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

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

执行gulp css再次重新打包，结果如下：

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;
}

昂 文章到此结束了！

posted on 2017-11-19 13:40 我爱张苗苗阅读(3932) 评论(2) 编辑收藏举报

刷新页面返回顶部