指南针：是否可以检查罗盘编译是否需要完成？

Question

我们使用Jenkins作为CI构建服务器，每次启动构建时，都会执行compass clean，然后执行compass compile。我们首先compass clean，因为我们事先没有做过与Compass相关的问题。我希望不要依赖在我的Jenkins构建的后台运行compass watch。

问题在于，随着我们添加越来越多的SASS文件，构建时间越来越长。我知道LibSass是我可以看得更多的东西但是现在不适合我。我希望能够运行compass clean＆gt; compass compile仅在至少有一个尚未由指南针处理过的SASS文件时。

你知道有没有办法实现这个目标？我唯一能想到的就是对Compass处理的CSS V进行时间戳比较。 SASS文件并确定是否需要compass compile。但是，我想认为解决这个问题的方法更为优雅。

Answer 1

如果你没有那么多地使用指南针，为什么不搜索你 使用的指南针混合你的代码，然后从Compass's source code挑选那些sass mixin以减少你的编译时间？

这对我自己的项目来说是一项有趣的练习 - 我真正使用罗盘多少钱？我甚至需要它吗？在我自己的项目中，我们放弃了对IE9的支持，因此我们不需要罗盘来为具有圆角的元素生成背景渐变的后备SVG。在那一刻，我问自己，“我是否真的需要完整的指南针库给我一个角落半径的混合？”答案是否定的......或者可能是部分肯定的 - 对于我仍然非常喜欢的mixins，我能够浏览他们的源代码并抓住我需要的函数和mixin。如果你使用的mixins并不是那么复杂，那么完全消除对罗盘的依赖将证明是有利的。为了加快编译时间而对项目进行去指导化的过程包括以下三个步骤。

1。在源代码中确定指南针的用法。

您可以使用下面的正则表达式搜索代码中的罗盘使用情况。您需要启用正则表达式搜索（VS，VS代码，Sublime，Notepad ++都支持正则表达式搜索），使用以下模式搜索罗盘变量你的项目的文件。我想出了一个非常大的正则表达式搜索来搜索代码中的罗盘用法。

正则表达式搜索接受参数的指南针混合：

\@include\s(adjust\-(font\-size\-to|leading\-to)|align\-(content|items|self)|alternating\-rows\-and\-columns|appearance|apply\-(origin|side\-rhythm\-border)|backface\-visibility|bang\-hack|baseline\-grid\-background|border\-bottom\-(left\-radius|radius|right\-radius)|border\-corner\-radius|border\-image|border\-left\-radius|border\-radius|border\-right\-radius|border\-top\-left\-radius|border\-top\-radius|border\-top\-right\-radius|box\-(align|direction|flex|flex\-group|lines|ordinal\-group|orient|pack|sizing)|break\-(after|before|inside)|color\-interpolation\-filters|column\-(break\-?(before|after|inside)|count|fill|gap|grid\-background|rule|rule\-(color|style|width)|span|span|width)|columns|content|contrasted|create\-transform|debug\-vertical\-alignment|delimited\-list|display\-flex|each\-gradient\-prefix|ellipsis|establish\-baseline|filter|filter\-gradient|filter\-margin|filter\-margin\-bottom|filter\-margin\-left|filter\-margin\-right|filter\-margin\-top|flex|flex\-(basis|direction|flow|grow|shrink|wrap)|flexbox|float|flow\-(from|into)|font\-face|for\-legacy\-browse(r|rs)|grid\-background|h\-borders|has\-layout|hide\-text|horizontal\-borders|horizontal\-list|horizontal\-list\-item|hyphens|image\-property|inline\-bloc(k|k\-)(list|list\-item)|inner\-table\-borders|justify\-content|keyframes|leader|leading\-border|link\-colors|list\-style|list\-style\-image|margin\-leader|margin\-trailer|min\-(height|width)|opacity|order|outer\-table\-borders|padding\-leader|padding\-trailer|perspective|perspective\-origin|prefix\-prop|prefixed\-properties|pretty\-bullets|print\-utilities|replace\-text|replace\-text\-with\-dimensions|reset\-(baseline|display|display|float)|rhythm|rhythm\-(borders|margins|padding)|rotate|rotate(3d|X|Y|Z)|scale|scale(3d|X|Y|Z)|selection|simple\-transform|single\-box\-shadow|single\-text\-shadow|single\-transition|skew|skew(X|Y)|sprite|sprite\-(background|background\-position|background\-rectangle|column|dimensions|img|position|replace\-text|replace\-text\-with\-dimensions|row)|sprites|sticky\-footer|stretch(|\-x|\-y)|tag\-cloud|trailer|transform|transform\-origin|transform\-style|transform2d|transform3d|translate(|3d|X|Y|Z|)|underscore\-hack|user\-select|with\-browser\-ranges|with\-each\-prefix|with\-prefix|word\-break)\(

正则表达式搜索没有参数的罗盘mixin

\@include\s(animation\-?(delay|direction|duration|fill\-mode|iteration\-count|name|play\-state|timing\-function)|background\-?(clip|image|origin|size|with\-css2\-fallback)|box\-shadow|clearfix|comma\-delimited\-list|display\-box|float\-left|float\-right|force\-wrap|global\-reset|has\-layout\-block|has\-layout\-zoom|horizontal\-list\-container|hover\-link|hyphenation|inline\-block\-list\-container|inline\-list|input\-placeholder|legacy\-pie\-clearfix|nested\-reset|nested\-reset|no\-bullet|no\-bullets|nowrap|opaque|pie\-clearfix|reset\-(body|box\-model|box\-model|focus|focus|font|font|html5|html5|image\-anchor\-border|image\-anchor\-border|list\-style|list\-style|quotation|quotation|table|table|table\-cell|table\-cell)|squish\-text|table\-scaffolding|text\-shadow|trailing\-border|transition|transition\-(delay|duration|property|timing\-function)|transparent|unstyled\-link|with\-browser\-support\-debugging)

正则表达式搜索指南针功能：

\s(brightness|browser\-out\-of\-scope|build\-grid\-background|comma\-list|contrast\-color|default\-box\-shadow|display\-browser\-range|get\-baseline\-gradient|get\-column\-fluid\-grid|get\-column\-gradient|has\-browser\-subset|intersect\-browser\-ranges|is\-time|linear\-gradient|lines\-for\-font\-size|prefix\-identifier|prefixed\-for\-transition|prefixes\-for\-capability|rhythm|set\-arglist\-default|support\-legacy\-browser|transition\-map|use\-prefix)\(

RegEx搜索指南针变量 将这些留在源代码中将是无害的，因为它们不依赖于指南针的调用。

\$(animation\-support\-threshold|background\-(clip\-support\-threshold|origin\-threshold|size\-threshold)|base\-(font\-size|half\-leader|leader|line\-height)|border\-image\-support\-threshold|border\-radius\-threshold|box\-shadow\-support\-threshold|box\-sizing\-support\-threshold|browser\-minimum\-versions|browsers\-supporting\-old\-webkit\-gradients|browsers\-supporting\-svg\-but\-not\-gradients|compass\-extensions|contrasted\-(dark\-default|light\-default)|critical\-usage\-threshold|css\-sel2\-support\-threshold|current\-browser\-versions|current\-prefix|debug\-browser\-support|default\-(animation\-(delay|direction|duration|fill\-mode|iteration\-count|name|play\-state|timing\-function)|background\-(clip|origin|size)|border\-radius|box\-(align|direction|flex|flex\-group|lines|ordinal\-group|orient|pack|shadow\-(blur|color|box|h\-offset|inset|spread|v\-offset)|\-sizing)|has\-layout\-approach|origin\-(x|y|z)|rhythm\-border\-(style|width)|rotate|scale\-(x|y|z)|skew\-(x|y)|text\-shadow\-(blur|color|h\-offset|shadspread|v\-offset)|transition\-(delay|duration|function|property)|translate\-(x|y|z)|vector\-(x|y|z))|disable\-magic\-sprite\-selectors|filter\-support\-threshold|flexbox\-support\-threshold|graceful\-usage\-threshold|gradient\-support\-threshold|grid-background\-(baseline\-(color|height)|column\-(color|width)|force\-fluid|gutter\-(color|width)|offset|total\-columns)|has\-layout\-support\-threshold|hide\-text\-direction|hyphens\-support\-threshold|ie6\-attribute\-hack\-support\-threshold|inline\-block\-alignment|inline\-block\-support\-threshold|input\-placeholder\-support\-threshold|legacy\-float\-support\-threshold|min\-line\-padding|multi|support\-threshold|opacity\-usage\-threshold|owg\-threshold|prefix\-context|regions\-support\-threshold|rem\-with\-px\-fallback|rhythm\-unit|round\-to\-nearest\-half\-line|selection\-support\-threshold|show\-baseline\-grid\-backgrounds|show\-|grid\-backgrounds|show\-grid\-backgrounds|sprite\-(default\-margin|default\-size|image\-default\-(height|width)|selectors)|supported\-browsers|svg\-gradient\-shim\-threshold|(transform|transition)\-support\-threshold|transitionable\-prefixed\-values|use\-legacy\-gradient\-syntax|use\-mozilla\-ellipsis\-binding|userselect\-support\-threshold)

2。只导入你需要的指南针部分。

找到使用指南针的位置后，请搜索罗盘的源代码，查找代码中使用的mixin和函数。有些功能需要比其他功能更重，对于其中一些混音，您会发现最好保持整个罗盘生态系统（如PNG生成等）

https://github.com/Compass/compass/tree/stable/core/stylesheets/compass

将它们复制到一个新的sass文件中（可能称之为_compass-lite.scss？）。他们的许可证允许这样做，只需确保在你的sass文件中注释好的​​引用：

// Portions of this software Copyright (c) 2009-2014 Christopher M. Eppstein
// Compass https://github.com/Compass/compass
// @license https://github.com/Compass/compass/blob/stable/LICENSE.markdown

3。利润

另一方面，如果您只想在问题中说明需要时运行指南针，或者您需要的混音太复杂，上述搜索将帮助您实现此目标。当您找到需要指南针的mixin时，您可以在仅这些特定文件的初始化之前使用@import "compass"标志。

  

更新：更清洁的路线（维护方式而非处理速度方式）是使用指南针混合（如果你使用npm compass-mixins是一个只是一个库指南针sass mixins，请注意他正在使用修改后的MIT许可证，如果这是一个问题）。

     

例如：

        

  // Compass SCSS Mixins for:  
  // @mixin background
  // @mixin background
  // @mixin border-image
  // imports  "shared",  "../utilities/general/hacks",  "../functions";
  @import '../../../node_modules/compass-mixins/lib/compass/css3/images';
  (...Then your first usage of the mixin)

     

有关compass-mixins方法的说明：

     

  
• 你的编译器需要咀嚼比你可能使用的代码更多的代码，所以如果速度是关注点，樱桃选择你需要的东西仍然是最好的方法。
  

     

关于樱桃挑选代码的说明：

     

  
• 如果您正在使用自动前缀，您可以省去指南针混音的大部分内容，可以删除添加-moz，-ms，-o前缀的许多行;你的自动前缀将为你处理这些。