备注:
   测试使用的是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. 永久以管理员身份运行cmd

    系统:win7 1,下图输入 cmd,找到cmd 2,发送到桌面快捷方式 3,在桌面上的cmd,右键,属性 点高级,进入后,勾上 管理员.

  2. ssh原理与应用

    一.什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会 ...

  3. nodejs利用express操作mysql增删改查

    如果不知道怎么连接数据库的请看http://www.cnblogs.com/complete94/p/6714757.html 我当大家都知道怎么连接数据库了,那么 我们开始吧 var express ...

  4. CF 187C Weak Memory 优先队列 难度:2

    http://codeforces.com/problemset/problem/187/C 这道题可以用二分+dfs检测,或者优先队列解 此处用了优先队列解法 从起点出发,维护一个优先队列,内容是p ...

  5. Unix系统中system函数的返回值

    网上关于system函数的返回值说明很多很详细但却不直观,这里搬出apue 3rd Editon中实现system函数的代码来说明其返回值. #include <sys/wait.h> # ...

  6. web运行异常解决

    端口占用: 在dos下,输入  netstat   -ano|findstr  8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill  /pid  6856  /f   ...

  7. zhx'code1

    void dandiao() { ,tail=; ;a<=k;a++) { ]) tail--; tail++; q[tail][]=z[a];q[tail][]=a; } ;a<=n;a ...

  8. 【dlbook】优化

    [神经网络优化的挑战] 一.病态: 虽然学习率很小,而且梯度大,但是由于Hessian阵的病态,二次项比一次项还要大,梯度下降事实上并不一定能下降,反而有可能上升.因此需要将学习率调低. 表现:梯度很 ...

  9. keras系列︱seq2seq系列相关实现与案例(feedback、peek、attention类型)

    之前在看<Semi-supervised Sequence Learning>这篇文章的时候对seq2seq半监督的方式做文本分类的方式产生了一定兴趣,于是开始简单研究了seq2seq.先 ...

  10. EasyRMS录播管理服务器项目实战:windows上开机自启动NodeJS服务

    本文转自EasyDarwin开源团队成员Penggy的博客:http://www.jianshu.com/p/ef840505ae06 近期在EasyDarwin开源团队开发一款基于EasyDarwi ...