备注:
   测试使用的是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. String类的subString(a,b)方法(基于jdk 1.9)

    基于上文:http://www.jianshu.com/p/a20ee3bb9c1b public String substring(int beginIndex, int endIndex) { i ...

  2. Learning R笔记(一)

    基本操作 帮助文档:?函数.演示:demo(函数).参数列表:formals(函数),返回为成对列表pairlist. 用all.equal函数检查浮点数是否相等,容忍度默认为1.5e-8,如果相等返 ...

  3. 11.深入理解读写锁ReentrantReadWriteLock

    protected final int tryAcquireShared(int unused) { /* * Walkthrough: * 1. If write lock held by anot ...

  4. brew || yarn 软件包管理工具

    1.brew || yarn 软件包管理工具

  5. item2 - MAC 下最好的终端工具

    1.http://www.iterm2.com/downloads.html (下载地址)

  6. 继承AbstractRoutingDataSource再通过AOP实现动态数据源切换

    package com.zdd.data.aspect; import java.util.ArrayList; import java.util.HashMap; import java.util. ...

  7. js中的执行环境及作用域

    最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧. 首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执 ...

  8. List根据某个字段(属性)去重

    有时候自带的list.Distinct()去重并不能满足魔门的要求,比如以下情况 如果testList的Name相同则视为重复,则可以如下实现,比写循环语句简洁多了 testList.Where((x ...

  9. python decorator 装饰器

    python装饰器是个对嵌套函数的语法糖 作用是在函数调用方法不变的情况下,将函数包装成另一个函数来使用 ---- import time def sum1(): sum = 1 + 2 print ...

  10. 移动设备web开发插件iScroll的使用详解

    地址:http://blog.nnnv.cn/index.php/archives/65