在Webstorm中使用Autoprefixer

最近玩了一下Sass (广告一下Sass中文文档:https://www.html.cn/doc/sass/),感觉不错,不过CSS3在不同平台兼容性代码一直是个头痛的问题,手写处理费时费力又容易出错。
曾经一直用sublime text写html和css,这些问题都有相应的插件。用Webstorm写js,但是来回切换编辑器也比较麻烦。
虽然Webstorm内置了css3自动补全功能,当输入user-select时,Webstorm会自动补全:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

但是很多情况下,这种自动补全并不令人满意,比如当我输入display:flex;时,Webstorm并不会自动补全为:

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

关于Autoprefixer

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {
     background : linear-gradient(to top, black, white);
     display : flex
}
::placeholder {
     color : #ccc
}

编译成:

a {
    background : -webkit-linear-gradient(bottom, black, white);
    background : linear-gradient(to top, black, white);
    display : -webkit-box;
    display : -webkit-flex;
    display : -moz-box;
    display : -ms-flexbox;
    display : flex
}
:-ms-input-placeholder {
    color : #ccc
}
::-moz-placeholder {
    color : #ccc
}
::-webkit-input-placeholder {
    color : #ccc
}
::placeholder {
    color : #ccc
}
 

Autoprefixer 同样会清理过期的前缀,因此下面的代码:

a {
    -webkit-border-radius : 5px;
    border-radius : 5px
}

编译成:

a {
    border-radius : 5px
}

因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

具体安装和配置:

所以尝试在Webstorm下搜索autoprefixer插件,无果。那就自己手动配置了一个。首先我考虑配置File Watchers,但是不习惯,原来在sublime text下用autoprefixer都是手动触发的,所以后面我配置了External Tools。

1.首先当然是安装node.js;

(略)

2.安装Autoprefixer,

https://github.com/postcss/autoprefixer

sudo npm install autoprefixer -g

要不要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。

npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/

3.安装postcss-cli

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli

sudo npm install postcss-cli -g

4.配置External Tools

打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮,如图:

769EDD8B-6AF0-4D6B-B73B-DF2DC25FAA1F

填写具体配置,例如我的配置,如图:

0C4975D0-6531-432B-8812-46D56164B817

  1. Program:填入你的postcss-cli 的PATH;
  2. Parameters:?-u autoprefixer -o $FileDir$/$FileName$ ?$FileDir$/$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli
  3. Working directory :$ProjectFileDir$

配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer,点击搞定,嘎嘎。

5.设置快捷键

右键太麻烦的话,可以设置个快捷键,打开Webstorm设置,Preferences -> Keymap ,?搜索External Tools , 配置 autoprefixer即可。 不要和原来的冲突就可以了。

ps:windows下可以直接用autoprefixer的PATH,具体配置

414473-5caba82f3555f590 (1)

2016年4月13日更新:
windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer 这个问题,
可以配置
Program:C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory :$ProjectFileDir$

 

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 在Webstorm中使用Autoprefixer

评论 16

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    用node下载autoprefixer ,Windows下找不到autoprefixer.cmd怎么办啊

    吴律3年前 (2015-10-14)回复
  2. #-48

    用node下载autoprefixer ,Windows下找不到autoprefixer.cmd怎么办啊
    我也遇到相同的问题呢

    wendy3年前 (2016-01-04)回复
  3. #-47

    windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer

    小白3年前 (2016-01-21)回复
  4. #-46

    windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer 这个问题,
    可以配置
    Program:C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmd
    Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
    Working directory :$ProjectFileDir$

    剑风3年前 (2016-03-10)回复
  5. #-45

    /usr/local/lib/node_modules/postcss-cli/bin/postcss -u autoprefixer -o /Users/Amor/WebstormProjects/DoraCMS/public/stylesheets/backstage/css/AdminLTE.css /Users/Amor/WebstormProjects/DoraCMS/public/stylesheets/backstage/css/AdminLTE.css
    env: node: No such file or directory

    Process finished with exit code 127

    Amor3年前 (2016-04-12)回复
    • 多谢

      yq1年前 (2017-10-30)回复
  6. #-44

    如果用gulp挂一个autoperfixer ,然后写个watch在保存的时候执行autoperfixer是不是也挺方便的?

    phoeshow3年前 (2016-04-13)回复
  7. #-43

    CreateProcess error=193, %1 不是有效的 Win32 应用程序。

    wwwwwbbbbb3年前 (2016-04-28)回复
    • 我得也是 怎么解决

      崔健2年前 (2017-06-11)回复
  8. #-42

    根本就没用啊,下面那几个参数才是关键,到底怎么配置压根没说明白

    囧囧2年前 (2016-08-07)回复
  9. #-41

    在哪里看到输出啊?

    小平2年前 (2016-09-13)回复
  10. #-40

    已经成功,谢谢。但有一个问题,就是怎么控制浏览器的版本,至少兼容ie8?

    小平2年前 (2016-09-13)回复
  11. #-39

    显示 Error running autoprefixer: Cannot run program “C:\Users\weishuisj\.npminstall_tarball\p\o\s\t\postcss-cli\4.1.0-8f6803678acd7a4f21483f1a4039136f6e1c214f.tgz” (in directory “E:\workspace”): CreateProcess error=193, %1 不是有效的 Win32 应用程序 错误,是什么情况

    qwe2年前 (2017-06-22)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏