备注:
   测试使用的是gulp 进行的编译
1. 项目初始化
npm init

mkdir src

touch app.css

body{
display: flex;
}
2. 安装(gulp 、gulp-postcss 以及几个依赖)
npm install -g gulp-cli
npm install gulp-postcss --save-dev
npm install gulp --save-dev
npm install autoprefixer --save-dev
npm install cssnano --save-dev
3. gulpfile.js 定义
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano'); gulp.task('css', function () {
var plugins = [
autoprefixer({browsers: ['last 1 version']}),
cssnano()
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
4. post.config.js 定义(可选,如果上面的gulpfile 没有使用autoprefixer 就需要)
module.exports = {
plugins: [
require('autoprefixer')
]
}
备注:
不需要使用postcss.config.js 的gulpfile.js var postcss = require('gulp-postcss');
var gulp = require('gulp'); gulp.task('css', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
5. 使用
gulp css
6. 输出信息
./dist/app.css

body{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
7. 参考资料
https://www.npmjs.com/package/gulp-postcss
https://github.com/postcss/postcss
 
 
 
 

postcss gulp 安装使用的更多相关文章

  1. Gulp安装及配合组件构建前端开发一体化

    原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...

  2. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  3. gulp安装和使用简介

    一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. ...

  4. Gulp安装使用教程

    题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...

  5. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  6. 和我一起使用postcss+gulp进行vw单位的移动端的适配

    随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题. 但是有一个单位vw就神奇的解决了这个问题.vw和vh是相对于 ...

  7. gulp安装及使用流程

    1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输 ...

  8. gulp安装+一个超简单入门小demo

    gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...

  9. Gulp安装及配合组件构建前端开发一体化(转)

    Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...

随机推荐

  1. Oracle Procedure记录

    1.定义 所谓存储过程(Procedure),就是一组用于完成特定数据库功能的SQL语句集,该SQL语句集经过 编译后存储在数据库系统中.在使用时候,用户通过指定已经定义的存储过程名字并给出相应的存储 ...

  2. Sql Server 2008 清理日志文件

    Use LingZhong Select NAME,size From sys.database_files ALTER DATABASE LingZhong SET RECOVERY SIMPLE ...

  3. bzoj1001平面图最小割转对偶图最短路

    https://www.lydsy.com/JudgeOnline/problem.php?id=1001 很明显的求对偶图的最短路即可(由于特判写错了一直wa = = ) //#pragma com ...

  4. 小练习:vaild number

    1.描述 给定字符串,若该字符串表示的是数字,则输出true,否则输出false 2.分析 题目一看感觉不难,做起来却很麻烦,首先是数字的各种表示要知道,然后就是对这些不同形式的数字进行筛选判断.该题 ...

  5. gitblit-禁用用户

    使用管理员账号(此处演示使用admin)登录到系统 右上角,找到用户菜单 再用户列表,找到要进行权限管理的用户,(演示alex) 禁用用户,取消权限 验证已经禁用 pull 权限被禁止

  6. QT 相关书籍

    qt qucik 核心编程 个人觉得此书写得非常之好....这位作者的另外一本虽然没看过,估计也不错 https://bbs.csdn.net/topics/390942701?list=lz qt5 ...

  7. 《APUE》第7章 进程环境-读书笔记

    一.main函数. main函数的原型如下.argc是命令行参数的数目,argv是指向参数的各个指针所构成的数组. int main(int argc, char *argv[]) 当内核执行C程序时 ...

  8. idea 配置springmvc+mybatis(图文教程)

    idea配置 spirngmvc+maven+mybatis 数据库采用的是mysql  服务器容器用的是tomcat8 废话不多说直接干! 首先新建一个 maven工程, "File&qu ...

  9. Java基础学习-接口-概述以及成员特点

    package interfaceclass; /*接口的概述: * 接口解决的问题: * 因为java中的继承的单一局限性(子类只能继承一个父类),为了打破这个局限,java语言提供了一个机制,接口 ...

  10. Linux:LAMP搭建DISCU!论坛

    LAMP搭建DISCU!论坛 试验机为centos6.8 i686 应用的包 mysql-5.1.73-linux-i686-glibc23.tar.gz httpd-2.2.24.tar.bz2 p ...