PostCSS-Comn使用说明

PostCSS-Comn

PostCSS-Comn使用说明,整合PostCSS常用功能
GitHub:https://github.com/NalvyBoo/PostCSS-Comn

插件作用

  • 支持CSS未来语法
  • 自动补全浏览器私有前缀
  • CSS预处理(整合Sass、LESS或Stylus功能,语法基本和Sass的相同)
  • 通过@import,整合多个CSS文件
  • 将相同的CSS媒体查询规则合并为一个
  • 压缩CSS文件
  • 给rgba颜色创建降级方案(添加备用颜色)
  • 给opacity提供降级方案(给IE浏览器添加滤镜属性)
  • 让IE8支持rem单位
  • 将伪元素的::转换为:(IE8不支持::)

使用说明

  1. 全局安装Gulp
  2. 复制仓库文件到项目目录(PostCSS文件夹 内的内容)
  3. 命令终端运行:npm install(淘宝镜像使用该命令:cnpm install
  4. src文件夹 为编辑源文件,css文件夹 为生成代码文件
  5. src文件夹 目录下命令终端运行:gulp css
  6. css文件夹 内查看编译后结果

语法介绍


以下内容为自定义进阶

PostCSS-Comn插件扩展

以扩展postcss-will-change插件为例

安装插件 项目目录下执行命令行

$ npm install postcss-will-change --save-dev

配置gulpfile.js文件

// 添加此行
var will_change = require('postcss-will-change');
gulp.task('css', function () { 
    var processors = [
        // 添加此行
        will_change
    ]; 
});

完成 执行命令查看效果

gulp css

PostCSS配置与命令

淘宝镜像npmcnpm(写命令时,将npm换成cnpm,其他与npm语法相同)

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

全局安装gulp
如果之前有安装过一个全局版本的 gulp,请执行一下npm rm --global gulp来避免和gulp-cli冲突

$ cnpm install --global gulp-cli

项目安装gulp(项目根目录下)

$ cnpm install --save-dev gulp

配置package.json文件

{ 
    "name": "PostCSS-Comn", 
    "version": "0.0.1", 
    "description": "PostCSS gulp plugin", 
    "keywords": [ 
        "gulpplugin", 
        "PostCSS", 
        "css" 
    ], 
    "author": "ningbo", 
    "license": "MIT", 
    "dependencies": { 
        "postcss": "^5.0.0", 
        "gulp": "~3.8.10" 
    }, 
    "devDependencies": { 
        "gulp-postcss": "^6.0.1" 
    } 
}

安装gulp-postcss(项目根目录下)

cnpm install --save-dev gulp-postcss

配置gulpfile.js文件,src文件为css编辑文件,css文件为编译生成文件

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

测试(在src中创建测试文件style.css

.test{
    background: black;
}

测试运行命令,在css文件查看style.css

$ gulp css

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

$ cnpm install autoprefixer --save-dev
$ cnpm install cssnext --save-dev
$ cnpm install precss --save-dev

配置gulpfile.js文件

var autoprefixer = require('autoprefixer'); 
var cssnext = require('cssnext'); 
var precss = require('precss');
var processors = [
    autoprefixer,
    cssnext,
    precss
]; 

运行命令,在css文件查看style.css

$ gulp css

PostCSS入门教程

source:http://www.w3cplus.com

工具

插件

插件列表:Github | postcss.parts

常用插件:

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,058评论 0 10
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 700评论 0 3
  • 本篇博文的内容根据 Introduction to Gulp.js 系列文章 拓展而来,其代码、依赖包及目录结构部...
    Nian糕阅读 979评论 0 2
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 2,802评论 7 54
  • 《Head First设计模式》读书笔记 命令模式(封装调用) 一,场景介绍 1,需求 设计一个家电自动化遥控器的...
    呆麻子阅读 647评论 1 11
  • 看了开头,就被这小子理工科小脑袋和超强动手能力折服,拆装收音机,用想就把开机时大吵大闹的收音机修理好。更别提自创三...
    妙呜阅读 168评论 1 0
  • 今天遇到了好多善良可爱的人 1.去浙二医院看牙齿 抽到了印象超好的医生 美丽大方温柔细心 而且名字还好听叫陈诗美 ...
    苏蕤人阅读 65评论 0 0
  • ”我们总是应该在大学留下点什么值得纪念的啊?你们说是吧?“此时此刻的我耷拉着腿,用最近大热的葛优躺窝在宿舍床上,被...
    Angle果丫阅读 131评论 3 4