快速：如何在应用程序启动时生成浏览器特定的css并提供服务

Question

问题：我不希望每次都向客户端发送prefixfree.js，我认为它可能不适合速度并且可以在服务器上解决侧。

但同时我不希望服务器一遍又一遍地重做相同的工作。我想塞雷尔语要做到这一点：

当服务器启动...

1. 转换少CSS
2. 使4个版本的所有CSS文件：
   1. 的webkit
   2. MOZ
   3. ie
   4. 所有浏览器
3. 然后适当地提供它们，所以如果浏览器代理是webkit，则提供该css文件的webkit版本。如果无法确定，则提供所有版本。

现在我可以代替所有的文件，我知道它不会增加那么多的文件大小。但我不知道如何减少编译器输出的前缀版本，我不想在命令行中运行每个css文件并运行一些命令来添加前缀。此外，尝试尽可能地改善流量并不是一个好习惯。

我也可以使用一些ide插件在较少的文件中添加前缀，但这使得css文件变得庞大且难以调试。

Answer 1

要做出正确的决定，您应该知道您必须支持哪些浏览器。 Yous也应该考虑Graceful degradation。

个人我认为运行较少与autoprefix和clean-css在大多数情况下是安全的选择。

测试很简单：

npm install less 
npm install less-plugin-clean-css 
npm install less-plugin-autoprefix 
lessc source.less production.css --autoprefix --clean-css 

注意，你可以设置你的目标浏览器作为autoprefix插件参数。为了支持与Bootstrap相同的浏览器，请使用以下内容：

--autoprefix='Android 2.3','Android >= 4','Chrome >= 20','Firefox >= 24','iOS >= 6','Opera >= 12','Safari >= 6' 

你说得对。供应商前缀会使您的CSS文件变大。你应该注意到你可以压缩/缩小你的代码（也是zip），你的代码可以被浏览器缓存。

您应该将较大的代码与-prefix-fee进行比较; 2kb gziped一个额外的http进程和一些JavaScript处理。维拉解释了为什么使用它可能是一个好主意：http://css-tricks.com/five-questions-with-lea-verou/

你的想法是介于上述两个解决方案之间的某处。你的css代码可能会稍小一些，但你仍然需要一些JavaScript处理来找出用户的浏览器。

我也可以使用一些ide插件在较少的文件中添加前缀，但是>使得css文件变得庞大且难以调试。

您可以将autoprefix插件与CSS源代码一起使用，以方便调试（使用Less编译器的--source-map选项）。在大多数情况下，您将拥有开发和生产版本的代码。

正如@ seven-phases-max已经说明的那样，您可以将所有上述内容集成到Grunt或Gulp的构建链中。