1：grunt-contrib-less
less,可以讓css變得更簡單，更易於維護，他可以定義常量，可以轉換單位，還可以計算顏色，他用巢狀把我們從重複的排列選擇器的漩渦中拯救出來。
所以如果你想成為一個好的前端，或者一個喜歡偷懶的人，那麼，less、sass或者jade這些東西儘量涉獵一些，會對效率的提升幫助極大。
grunt-contrib-less很容易，用處就是把less轉換成css，只需要注意一下，現在先不要壓縮，因為我們還有很多事情要做。
2：grunt-autoprefixer
autoprefixer，他是我近期的發現，看到他我對我從前對付瀏覽器私有屬性的方式感到羞愧。
大家一定對寫css的時候的那些瀏覽器私有屬性很噁心了，關鍵是誰都沒有心情去背到底這個屬性那個瀏覽器存在私有字首，所以 webkit moz ms o 統統都要寫上去，一條語句，寫了5遍。
那麼，有了autoprefixer，我們就不需要再兼顧他們了，或者說，autoprefixer會幫我們把這些做了。
比如我們在less裡寫：
.test{
transform:rotate(20deg);
transition: 1s;
background-image: linear-gradient(to bottom, #444444, #999999);
}那麼生成的css就是：
.test {
background-image: -webkit-linear-gradient(top, #444, #999);
background-image: linear-gradient(to bottom, #444, #999);
-webkit-transition: 1s;
transition: 1s;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}這樣子的。美觀大方。恩恩···
3：grunt-contrib-csslint
csslint ，他會幫我們查出一些語法上的錯誤，什麼？css有什麼語法錯誤。其實也不算是錯誤，算是一些不規範的寫法吧。
比如說我寫了：display:inline-block;float:left;
那麼他就會報錯給你說：
不過他需要一個.csslintrc的配置檔案，這個網上都有，可以自己擴充或刪減，因為有的錯誤，是沒必要的。
4：grunt-csscomb
csscomb，他可以把你寫的css按照最優的順序排出來，便於閱讀，而且也很規範，別人看到了這樣的css檔案會特別的舒服。
比如我寫了這樣一堆亂七八糟的東西：···
.a{
position:absolute;width:100px;float:left;height:100px;display:block;top:20px;font-size:12px;line-height:20px;margin-top:30px;padding-left:10px;
transform:rotate(20deg);
}
那麼他會幫我編譯成:.a {
position: absolute;
top: 20px;
display: block;
float: left;
width: 100px;
height: 100px;
padding-left: 10px;
margin-top: 30px;
font-size: 12px;
line-height: 20px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}美美的。
當然他也需要自己的配置檔案.csscomb.json
5：grunt-contrib-cssmin
顧名思義，檔案壓縮。沒什麼好說的額。
配置方法大家可以網上去找，或者直接去他們的github上看文件，說的都很詳細。
以上就是css的grunt配置，合起來用，就能幫你寫出優雅的css檔案。
評論(1)