Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ningbonb/postcss-comn
PostCSS入门与配置
https://github.com/ningbonb/postcss-comn
notes postcss
Last synced: 8 days ago
JSON representation
PostCSS入门与配置
- Host: GitHub
- URL: https://github.com/ningbonb/postcss-comn
- Owner: ningbonb
- Created: 2017-02-10T02:15:23.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-17T03:39:25.000Z (almost 8 years ago)
- Last Synced: 2024-11-06T03:04:44.628Z (about 2 months ago)
- Topics: notes, postcss
- Language: CSS
- Homepage:
- Size: 24.4 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PostCSS-Comn
PostCSS-Comn使用说明,整合PostCSS常用功能## 插件作用
- 支持CSS未来语法
- 自动补全浏览器私有前缀
- CSS预处理(整合Sass、LESS或Stylus功能,语法基本和Sass的相同)
- 通过@import,整合多个CSS文件
- 将相同的CSS媒体查询规则合并为一个
- 压缩CSS文件
- 给rgba颜色创建降级方案(添加备用颜色)
- 给opacity提供降级方案(给IE浏览器添加滤镜属性)
- 让IE8支持rem单位
- 将伪元素的`::`转换为`:`(IE8不支持`::`)## 使用说明
1. [全局安装Gulp][gulp-g]
2. 复制仓库文件到项目目录(`PostCSS文件夹` 内的内容)
3. 命令终端运行:`npm install`(淘宝镜像使用该命令:`cnpm install`)
4. `src文件夹` 为编辑源文件,`css文件夹` 为生成代码文件
5. `src文件夹` 目录下命令终端运行:`gulp css`
6. `css文件夹` 内查看编译后结果## 语法介绍
- [cssnext语法介绍](./cssnext)
- [PreCSS语法介绍](./precss)----------
## 以下内容为自定义进阶
## PostCSS-Comn插件扩展
以扩展`postcss-will-change`插件为例**安装插件 项目目录下执行命令行**
```git
$ npm install postcss-will-change --save-dev
```
**配置`gulpfile.js`文件**```javascript
// 添加此行
var will_change = require('postcss-will-change');
``````javascript
gulp.task('css', function () {
var processors = [
// 添加此行
will_change
];
});
```**完成 执行命令查看效果**
```git
gulp css
```## PostCSS配置与命令
**淘宝镜像npm`cnpm`(写命令时,将`npm`换成`cnpm`,其他与npm语法相同)**
```git
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
```**全局安装`gulp`**
如果之前有安装过一个全局版本的 gulp,请执行一下`npm rm --global gulp`来避免和`gulp-cli`冲突```git
$ cnpm install --global gulp-cli
```**项目安装`gulp`(项目根目录下)**
```git
$ cnpm install --save-dev gulp
```**配置`package.json`文件**
```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`(项目根目录下)**
```git
cnpm install --save-dev gulp-postcss
```**配置`gulpfile.js`文件,`src`文件为css编辑文件,`css`文件为编译生成文件**
```javascript
var gulp = require('gulp');
var postcss = require('gulp-postcss');
``````javascript
gulp.task('css', function () {
var processors = [
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./css'));
});
```**测试(在`src`中创建测试文件`style.css`)**
```css
.test{
background: black;
}
```
**测试运行命令,在`css`文件查看`style.css`**```git
$ gulp css
```**添加PostCSS插件:[Autoprefixer][autopre](处理浏览器私有前缀),[cssnext][cssnext](使用CSS未来的语法),[precss][precss](像Sass的函数)**
```git
$ cnpm install autoprefixer --save-dev
$ cnpm install cssnext --save-dev
$ cnpm install precss --save-dev
```**配置`gulpfile.js`文件**
```javascript
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
``````javascript
var processors = [
autoprefixer,
cssnext,
precss
];
```**运行命令,在`css`文件查看`style.css`**
```git
$ gulp css
```## PostCSS入门教程
source:[http://www.w3cplus.com][source1]- [PostCSS深入学习:你需要知道什么][konw1]
- [PostCSS深入学习:设置选项][konw2]
- [PostCSS深入学习:Gulp设置][konw3]
- [PostCSS深入学习:Grunt配置][konw4]
- [PostCSS深入学习: 管理插件][konw5]
- [PostCSS深入学习: 跨浏览器兼容性][konw6]
- [PostCSS深入学习: 压缩和优化CSS][konw7]
- [PostCSS深入学习: PreCSS的使用][konw8]
- [PostCSS深入学习: 定制自己的预处理器][konw9]
- [PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用][konw10]
- [PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS][konw11]
- [PostCSS深入学习: 简写和速写][konw12]
- [PostCSS入门:Sass用户入门指南][know13]## 工具
- [CodePen][codepen]
- [Prepros][prepros]## 插件
插件列表:[Github][pluginsList] | [postcss.parts][postcssParts]常用插件:
- [cssnext][cssnext]:CSS未来语法
- [Autoprefixer][autopre]:自动补全浏览器私有前缀
- [precss][precss]:CSS预处理(整合Sass、LESS或Stylus功能,语法基本和Sass的相同)
- [postcss-import][import]:通过@import,整合多个CSS文件
- [css-mqpacker][mqpacker]:将相同的CSS媒体查询规则合并为一个
- [cssnano][cssnano]:压缩CSS文件
- [postcss-color-rgba-fallback][postcssRgba]:给rgba颜色创建降级方案(添加备用颜色)
- [postcss-opacity][opacity]:给opacity提供降级方案(给IE浏览器添加滤镜属性)
- [node-pixrem][pixrem]:让IE8支持rem单位
- [postcss-pseudoelements][pseudoelements]:将伪元素的`::`转换为`:`(IE8不支持`::`)[source1]:http://www.w3cplus.co
[konw1]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html
[konw2]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-instant-setup-options.html
[konw3]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-gulp-setup.html
[konw4]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-grunt-setup.html
[konw5]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-exploring-plugins.html
[konw6]:http://www.w3cplus.com/PostCSS/using-postcss-for-cross-browser-compatibility.html
[konw7]:http://www.w3cplus.com/PostCSS/using-postcss-for-minification-and-optimization.html
[konw8]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-preprocessing-with-precss.html
[konw9]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-roll-your-own-preprocessor.html
[konw10]:http://www.w3cplus.com/PostCSS/using-postcss-together-with-sass-stylus-or-less.html
[konw11]:http://www.w3cplus.com/PostCSS/using-postcss-with-bem-and-suit-methodologies.html
[konw12]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-shortcuts-and-shorthand.html
[know13]:http://www.w3cplus.com/preprocessor/getting-started-with-postcss-a-quick-guide-for-sass-users.html[codepen]:http://codepen.io/
[prepros]:https://prepros.io/[cssnext]:http://cssnext.io/features/
[autopre]:https://github.com/postcss/autoprefixer
[precss]:https://github.com/jonathantneal/precss
[cssnano]:http://cssnano.co/
[import]:https://github.com/postcss/postcss-import
[mqpacker]:https://github.com/hail2u/node-css-mqpacker
[postcssRgba]:https://github.com/postcss/postcss-color-rgba-fallback
[opacity]:https://github.com/iamvdo/postcss-opacity
[pixrem]:https://github.com/robwierzbowski/node-pixrem
[pseudoelements]:https://github.com/axa-ch/postcss-pseudoelements[pluginsList]:https://github.com/postcss/postcss#plugins
[postcssParts]:http://postcss.parts/[gulp-g]:http://www.w3cplus.com/PostCSS/using-postcss-for-cross-browser-compatibility.html