如何使用grunt縮小CSS文件並將其編譯為JS

Question

我是一個咕unt的biginner，但我只知道如何使用grunt concat和uglify。 現在，我需要有關CSS縮小，復制和活動加載以及其他任務的幫助。

現在，我需要為我的JS小部件構建一個UI系統，因此我正在考慮將變量添加到css文件中（以某種方式減少），然后將其編譯（以實際樣式替換變量）為真正的css。 但是我不能少使用它，因為我的小部件總共是20k，LESS太大了。

我似乎需要使用grunt來執行諸如mincss和i-dont-know-hat之類的工作，以將其編譯為變量形狀的js文件。 而且我需要對其進行LiveLoad和其他更多操作，以使整個進度自動進行。

這是我想做的：

style.css：

.a{
  width: $aWidth;
  color: $aColor;
}

這是我要寫在css文件中的東西，實際上這不是真正的css。

首先將其縮小（我不知道是否可以縮小偽造的CSS？）：style.min.css

.a{width: $aWidth;color: $aColor;}

然后將其編譯為css.js（只需添加一個“ var css =”，這通常會使我停頓下來）：

var css = ".a{width: $aWidth;color: $aColor;}";

我將在我的js中進行簡單的RegExp替換，使其成為真正的CSS，一個簡單易用的less.js。 我知道該怎么做...

將簡明的文件widget.js復制到我的nginx靜態文件文件夾中以進行本地測試（是否使用grunt復制？）

當我保存/更改style.css文件（使用watch？或liveload ?，也許我需要兩組設置來觀看css或js）時，自動運行上述所有任務並刷新頁面。

這就是我所需要的，我相信這會對更多發脾氣的初學者有所幫助。 謝謝。

Answer 1

也許你可以實際使用less與組合咕嚕-UCSS 。 從自述文件：

該任務可以做兩件事； 使用ucss分析html + css並在grunt日志中打印出所有未使用的選擇器，並使用該信息創建新的清理器