PostCSS-Comn

PostCSS-Comn使用說明蒋川，整合PostCSS常用功能
GitHub：https://github.com/NalvyBoo/PostCSS-Comn

插件作用

• 支持CSS未來語法
• 自動補全瀏覽器私有前綴
• CSS預處理（整合Sass捺球、LESS或Stylus功能氮兵，語法基本和Sass的相同）
• 通過@import，整合多個CSS文件
• 將相同的CSS媒體查詢規(guī)則合并為一個
• 壓縮CSS文件
• 給rgba顏色創(chuàng)建降級方案(添加備用顏色)
• 給opacity提供降級方案（給IE瀏覽器添加濾鏡屬性）
• 讓IE8支持rem單位
• 將偽元素的::轉(zhuǎn)換為:(IE8不支持::)

使用說明

1. 全局安裝Gulp
2. 復制倉庫文件到項目目錄（PostCSS文件夾 內(nèi)的內(nèi)容）
3. 命令終端運行：npm install（淘寶鏡像使用該命令：cnpm install）
4. src文件夾 為編輯源文件醉冤，css文件夾 為生成代碼文件
5. src文件夾 目錄下命令終端運行：gulp css
6. css文件夾 內(nèi)查看編譯后結(jié)果

語法介紹

• PreCSS語法介紹

以下內(nèi)容為自定義進階

PostCSS-Comn插件擴展

以擴展postcss-will-change插件為例

安裝插件 項目目錄下執(zhí)行命令行

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

配置gulpfile.js文件

// 添加此行
var will_change = require('postcss-will-change');

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

完成 執(zhí)行命令查看效果

gulp css

PostCSS配置與命令

淘寶鏡像npmcnpm（寫命令時篙悯，將npm換成cnpm鸽照，其他與npm語法相同）

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

全局安裝gulp
如果之前有安裝過一個全局版本的 gulp矮燎，請執(zhí)行一下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中創(chuàng)建測試文件style.css）

.test{
    background: black;
}

測試運行命令既们，在css文件查看style.css

$ gulp css

添加PostCSS插件：Autoprefixer(處理瀏覽器私有前綴)正什，cssnext(使用CSS未來的語法),precss(像Sass的函數(shù))

$ 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

• PostCSS深入學習：你需要知道什么
• PostCSS深入學習：設(shè)置選項
• PostCSS深入學習：Gulp設(shè)置
• PostCSS深入學習：Grunt配置
• PostCSS深入學習: 管理插件
• PostCSS深入學習: 跨瀏覽器兼容性
• PostCSS深入學習: 壓縮和優(yōu)化CSS
• PostCSS深入學習: PreCSS的使用
• PostCSS深入學習: 定制自己的預處理器
• PostCSS深入學習: PostCSS和Sass主经、Stylus或LESS一起使用
• PostCSS深入學習: 結(jié)合BEM和SUIT方法使用PostCSS
• PostCSS深入學習: 簡寫和速寫
• PostCSS入門：Sass用戶入門指南

工具

• CodePen
• Prepros

插件

插件列表：Github | postcss.parts

常用插件：

• cssnext：CSS未來語法
• Autoprefixer：自動補全瀏覽器私有前綴
• precss：CSS預處理（整合Sass渠驼、LESS或Stylus功能鉴腻，語法基本和Sass的相同）
• postcss-import：通過@import，整合多個CSS文件
• css-mqpacker：將相同的CSS媒體查詢規(guī)則合并為一個
• cssnano：壓縮CSS文件
• postcss-color-rgba-fallback：給rgba顏色創(chuàng)建降級方案(添加備用顏色)
• postcss-opacity：給opacity提供降級方案（給IE瀏覽器添加濾鏡屬性）
• node-pixrem：讓IE8支持rem單位
• postcss-pseudoelements：將偽元素的::轉(zhuǎn)換為:(IE8不支持::)