怎么配置autoprefixer loader不清理过期的前缀

下载&&并已复制到Installed Packages/目录下,详见&图,node.js已装,没出现视频中直接可以加CSS前缀的方法,期待回复!
您需要确保1.安装node.js(cmd中运行node -v可以正常出现)2.在package control中安装autoprefixer3.在书写css的地方运行ctrl shift P打开命令窗口,选择Autoprefixe css即可。
谢 谢greater,,,,,,已完美解决我的问题,,敬业专业负责,赞赞赞!
CSS3 布局属性全接触1755人阅读
webstorm内置css3自动补全功能
eg:在样式文件border-radius过程中会出现加前缀的样式,敲回车键即可
&span style=&font-family:Microsoft YaH&&div {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
但某些样式语句不能自动补全,如
输入display:
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。
使用方法:
step1:安装node.js (/article/b0b63dbfca599a4a.html)
step2:安装Autoprefixer &npm install autoprefixer -g
step3:安装postcss-cli &npm install postcss-cli -g
step4:设置webstorm External Tools
打开webstorm-&File-&搜索External Tools-&点击‘+’,设置Edit Tool
Name:autoprefixer&
Tool settings
& & & &Program: 找到AppData下的文件postcss.cm &若找不到AppData,在地址栏输入%appdata%回车即可
& & & &Parameters:-u autoprefixer -o outputFile inputFile &注意文件顺序输出文件及输入文件 ,输入文件需要先新建,不能自动生成
& & & &Working directory:文件目录即可,可根据自己需要调整
step5:运行
在输出文件中点击右键-&autoprefixer ,即可生成新增兼容前缀的文件
设置快捷键
&&相关文章推荐
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:10417次
排名:千里之外
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'当前位置: >
> Autoprefixer 2016 免费版(附安装教程)
Autoprefixer 2016 免费版(附安装教程)
软件大小:64.4KB
软件语言:简体中文
软件类型:
软件授权:免费软件
更新时间:
软件类别:编程工具
软件官网:
应用平台:
网友评分:
软件介绍人气软件下载地址相关文章
微软发布了最新的 Visual Studio 2010 软件开发编程平台及 .Net Framework 4 框架。这次 VisualStudio 2010 包括 Professional 专业版、Premium 白金版、Ultimate 旗舰版、Visual Studio 2012 是一个综合性产品系列,适用于每一位希望升级或创建精彩应用程序的组织、团体和个人开发人员首先需要先下载 Myeclipse 2014 官方安装文件,然后按照安装说明操作即可Java SE Development Kit 7官方下载,JDK是Java开发环境。JAVA语言恐怕是稳居网路应用程序语言的首选了,这都要归功于它高度的安全性以及跨平台的特性,几乎在目前所有的电经过了MyEclipse 8.5 M1和MyEclipse 8.5 M2两个版本,MyEclipse Enterprise Workbench 8.5 for Eclipse 3.5.2终于在昨天正式发布了!在官方网站上 MyEclipse 8.5 可以下载Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。幸运的是,Eclipse 附带了一个标准的插WebStorm 是jetbrains公司旗下一款JavaScript 开发工具,喜欢的朋友抓紧下载吧找到SETUP文件夹下的setup.sdb,用记事本打开它,找到[Product Key],将下面的一行序列号删除,改为正式Key,保存后再安装就是正式版了基于Eclipse开发的功能强大的企业级集成开发环境,主要用于Java、Java EE以及移动应用的开发易语言是一门计算机编程语言。以中文作为程序代码表达的语言形式。本平台提供易语言5.5完美破解版免费下载,内附破解补丁,完美破解
Autoprefixer 2016 免费版(附安装教程)
CopyRight &
JB51.Net , All Rights ReservedAutoPrefixer - 简书
AutoPrefixer
众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量,还会使得你的思路被打断。
如何解决这个问题?最近写项目时,就发现了一个处理CSS前缀问题的神器——AutoPrefixer。
AutoPrefixer
What is AutoPrefixer
Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,而你无需关心要为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新的规范。
How to use AutoPrefixer
介绍了这么多,如果用起来很麻烦,那还不如直接手写,而AutoPrefixer的另一大特点就是使用简便,现在来说说怎么用。
AutoPrefixer可以简单的通过下载plugin配置到Sublime,Brackets或Atom等IDE里,而在WebStorm中无法通过plugin直接安装和使用AutoPrefixer,需要通过External Tools或File Watchers来实现,详细的在WebStorm中如何安装可以参考 。
如果单单只能通过IDE才能使用这个功能,那它远称不上神器,真正让其拥有神器之名的原因是:它可以很简单、有效地同现有的打包工具(gulp, webpack等)一同使用,来完成对项目中所有的css文件中的属性添加前缀。
下面,我们就分别来看在这两种打包工具下如何使用AutoPrefixer。
gulp在gulp中,可以使用
推荐的postcss + autoprefixer两个插件的组合,也可以通过gulp-autoprefixer这一个插件。
// Method 1: postcss + autoprefixer
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
// Method 2: gulp-autoprefixer
gulp.task('autoprefixer', function () {
var autoprefixer = require('gulp-autoprefixer');
return gulp.src('./src/*.css')
.pipe([ autoprefixer({ browsers: ['last 2 versions'] }) ])
.pipe(gulp.dest('./dest'));
webpack而在最近很火的webpack中使用AutoPrefixer更是轻而易举、如虎添翼。使用webpack可以通过简单的配置将本文开头提到的sass这样的预处理器同autoprefixer这样的后处理程序结合在一起。var autoprefixer = require('autoprefixer');
module.exports = {
loaders: [
{ test: /\.css$/, loader: "style!css!postcss" },
{ test: /\.scss$/, loader: "style!css!postcss!sass" }
postcss: [ autoprefixer({ browsers: ['last 2 versions'] })
注: 另外webpack还有一个autoprefixer-loader,但npm官网已将其标为【deprecated】,推荐使用上面示例中通过postcss-loader的方式使用autoprefixer。
去看那尽头一眼...
http://discipled.me/400-025-8883
北京web前端培训
解决css3前缀问题的插件-Autoprefixer
来源:火星人
我们在前端开发中,经常会遇到一些属性需要添加前缀属性,比如-webkit-transform: 或者displsy:-webkit-&这些需要添加前缀的属性多且难记,很容易就会在上面出现错误,给我们增加不必要的调试,浪费我们的时间。今天我就为大家介绍一个能解决这个问题的插件-Autoprefixer
Autoprefixer是一款基于postcss的插件,他能检测你写出的css属性并且判断他是否是需要添加前缀的属性,如果是就会自动为该属性添加前缀。让我们来看一下效果吧
这是Autoprefixer处理之前的css代码
&&display: -webkit-
&&display: -ms-
&&display:
这是Autoprefixer处理之后的css代码
他能自动位代码添加浏览器前缀属性,这大大简化了我们的开发工作,这也是我今天向大家推荐这款插件的原因
不过这个插件安装起来有点复杂,在这里介绍一下流程
它是基于node.js运行的,所以你需要先安装node.js。你可以在node.js的官网下载到它的安装包,你也可以使用别的安装方。
然后是npm,npm是nodejs官为nodejs定制的一个工具,是Node.js的包管理器,通过npm可以下载安装nodejs的模块包。如果你下载的是版本较高的node.js,那么包里很可能已经集成了npm,不需要你自行安装,在cmd命令行中输入 npm -v 如果反馈是 4.0.2 之类的版本号那么你就不需要安装,否则请安装npm,npm的安装方法百度有很多,就不在这介绍了
之后就是Autoprefixer了,在cmd命令行中输入 npm install autoprefixer -g mac下可能需要加sudo,这个原生载点在国外,速度可能会很慢,如果实在无法安装可以用国内的镜像载点,方法就是把命令中的npm改成cnpm,这是等程序运行完就完成了。你可能觉得这太简单了,但安装过程就是这样的
最后是postcss,Autoprefixer其实是postcss的插件,在cmd命令行中输入 npm install postcss-cli -g 来进行安装,同样可以使用国内镜像载点
全部安装好了之后,我们就可以在自己的编辑工具中配置Autoprefixer了
我自己用的是HBuilder,就就讲讲在HBuilder中配置Autoprefixer的方法吧
打开HBuilder进入主界面,点击运行-外部工具-外部工具配置,然后新建一个外部工具,配置如下
第二行要执行的命令或文件的路径可能根据各位的系统版本有所差异,请自己纠正,主要就是找到postcss.cmd这个文件
配置完成之后就可以使用了,右键选择外部工具使用还是自己设置快捷键都可以,使用后需要一点时间处理,视代码长度大概两秒到十余秒吧
以上就是对Autoprefixer的介绍了,希望对各位有用
热门课程推荐&&查看全部课程
400-025-8883
7*24小时免费咨询
北京火星人科技文化发展中心版权所有 Copyright & copy 2002-, All Rights Reserved 京ICP备 号
关于火星人
前往火星人,咨询致电。
Copyright & copy 2002-
保留所有权利。
京ICP备 号}

我要回帖

更多关于 autoprefixer配置 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信