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 是一款基于任务的设计模式的自动化工具 ...
随机推荐
- cordova安卓sdk
Android SDK在线更新镜像服务器来下载安装: 1.北京化工大学镜像服务器地址: IPv4: ubuntu.buct.edu.cn/ 端口:80 IPv4: ubuntu.buct.cn/ 端口 ...
- JXLS导出Excel(模板导出)
1.导包 在pom.xml中加入依赖如下: <dependency> <groupId>org.jxls</groupId> <artifactId>j ...
- torch 深度学习 (2)
torch 深度学习 (2) torch ConvNet 前面我们完成了数据的下载和预处理,接下来就该搭建网络模型了,CNN网络的东西可以参考博主 zouxy09的系列文章Deep Learning ...
- 十八 Python分布式爬虫打造搜索引擎Scrapy精讲—Scrapy启动文件的配置—xpath表达式
我们自定义一个main.py来作为启动文件 main.py #!/usr/bin/env python # -*- coding:utf8 -*- from scrapy.cmdline import ...
- IOS-数据缓存
一.关于同一个URL的多次请求 有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造成以下问题 (1)用户流量的浪费 ...
- GitHub:Git的使用
1.下载安装后设置姓名和邮箱地址 $ git config --global user.name "yourGithubName" $ git config --global us ...
- CSS布局 — 圣杯布局与双飞翼布局
圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...
- laravel中的validator()类验证的使用
- C#学习历程(六)[ref 关键字的使用]
ref 关键字的使用 ref 关键字通过引用(而非值)传递参数. 通过引用传递的效果是,对所调用方法中的参数进行的任何更改都反映在调用方法中. 例如,如果调用方传递本地变量表达式或数组元素访问表达式, ...
- L3-010. 是否完全二叉搜索树
L3-010. 是否完全二叉搜索树 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 将一系列给定数字顺序插入一个初始为空的二叉搜 ...