postcss gulp 安装使用
npm init
mkdir src
touch app.css
body{
display: flex;
}
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
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'));
});
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'));
});
gulp css
./dist/app.css
body{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
https://www.npmjs.com/package/gulp-postcss
https://github.com/postcss/postcss
postcss gulp 安装使用的更多相关文章
- Gulp安装及配合组件构建前端开发一体化
原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...
- windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)
以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...
- gulp安装和使用简介
一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. ...
- Gulp安装使用教程
题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
- 和我一起使用postcss+gulp进行vw单位的移动端的适配
随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题. 但是有一个单位vw就神奇的解决了这个问题.vw和vh是相对于 ...
- gulp安装及使用流程
1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输 ...
- gulp安装+一个超简单入门小demo
gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...
- Gulp安装及配合组件构建前端开发一体化(转)
Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...
随机推荐
- String类的subString(a,b)方法(基于jdk 1.9)
基于上文:http://www.jianshu.com/p/a20ee3bb9c1b public String substring(int beginIndex, int endIndex) { i ...
- Learning R笔记(一)
基本操作 帮助文档:?函数.演示:demo(函数).参数列表:formals(函数),返回为成对列表pairlist. 用all.equal函数检查浮点数是否相等,容忍度默认为1.5e-8,如果相等返 ...
- 11.深入理解读写锁ReentrantReadWriteLock
protected final int tryAcquireShared(int unused) { /* * Walkthrough: * 1. If write lock held by anot ...
- brew || yarn 软件包管理工具
1.brew || yarn 软件包管理工具
- item2 - MAC 下最好的终端工具
1.http://www.iterm2.com/downloads.html (下载地址)
- 继承AbstractRoutingDataSource再通过AOP实现动态数据源切换
package com.zdd.data.aspect; import java.util.ArrayList; import java.util.HashMap; import java.util. ...
- js中的执行环境及作用域
最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧. 首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执 ...
- List根据某个字段(属性)去重
有时候自带的list.Distinct()去重并不能满足魔门的要求,比如以下情况 如果testList的Name相同则视为重复,则可以如下实现,比写循环语句简洁多了 testList.Where((x ...
- python decorator 装饰器
python装饰器是个对嵌套函数的语法糖 作用是在函数调用方法不变的情况下,将函数包装成另一个函数来使用 ---- import time def sum1(): sum = 1 + 2 print ...
- 移动设备web开发插件iScroll的使用详解
地址:http://blog.nnnv.cn/index.php/archives/65