单个函数/ go中的多个文件的Css Autoprefixer？

Question

我的Angular2项目有100多个Css文件，这些文件没有任何前缀，如：Mozila，：Chrome等，我想要一些工具或任何gulp任务或任何将我的所有css文件转换为文件的东西有前缀。

我试过这个

  

https://github.com/postcss/autoprefixer

但不按我的用例工作，

有可能吗？如果有，怎么样？

Answer 1

因为你要求回答：

在IDE中（我以Visual Studio Code为例）：

• Ctrl + Maj + F将启动全局搜索（或在左侧工具栏上，单击放大镜）
• 激活“按正则表达式搜索”选项（由.*表示）

• 输入您的正则表达式。它就像这样

  ^\s*([a-z-]*)\s*:\s*([\d\w-()"\s\.:=!@]*);?\s*$

• 在第二个字段中，使用类似

  的内容

  moz-$1: $2;\nsafari-$1: $2;

它会为正则表达式找到的每个属性添加“moz-”。

当然我输入的速度很快，所以你必须做一些调整，但这个想法就在这里。

聊天后编辑以下是解释：

• 以^开头，意思是“行从这里开始”
• 然后\ s *表示“行以你想要的多少标签或空格开始”
• （[a-z - ] *）表示“查找包含a到z字母的属性，以及 - 字符”
• \ s *如上所述，有些空格
• ：for：in in every css property
• 再次，\ s *
• （[\ d \ w - （）“\ s。：=！@] *）表示”找到包含字母，数字，空格和列出的每个特殊字符的属性值（。：=！@）“
• 然后我们用一条线关闭; （出现零或一次）
• 然后使用\ s *
获得尽可能多的空间
• 和$表示该行的结尾（与开头的^相反）

回答如何做到这一点：当你将括号放在正则表达式中时，它会“捕获”它找到的内容并将其注册到以$符号开头的变量中。这就是你在替换字符串中写$ 1，$ 2的原因，因为它捕获了属性名称和属性值。 \ n允许换行，你所要做的就是尽可能多地添加前缀！

Answer 2

有一个名为Autoprefixer的node.js工具，可以完全满足您的需求。 PostCSS autoprefixer实际上只是它的一个包装器。你可以直接使用它。

如果您不使用Gulp，Grunt或其他任务跑步者，您可以从命令行手动使用Autoprefixer。

首先安装它：

npm install -g autoprefixer

然后在某个文件上使用它：

autoprefixer file.css

或多个文件：

autoprefixer -d processed *.css