grunt前端打包——css篇

[導讀] 前端打包的工具備不少，我用的習慣的就是這個grunt，不管是你要在github上作開源，仍是讓本身的項目變得更易於維護，grunt都是首選。

前端打包的工具備不少，我用的習慣的就是這個grunt，不管是你要在github上作開源，仍是讓本身的項目變得更易於維護，grunt都是首選。

 

網上的安裝教程很是多了，這裏就只是介紹一下都有哪些好用的插件。

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裏寫：

1. .test{

2.  
3. transform:rotate(20deg);
4.  
5. transition: 1s;
6.  
7. background-image: linear-gradient(to bottom, #444444, #999999);
8.  
9. }

 

 

那麼生成的css就是：

 

1. .test {

2.  
3. background-image: -webkit-linear-gradient(top, #444, #999);
4.  
5. background-image: linear-gradient(to bottom, #444, #999);
6.  
7. -webkit-transition: 1s;
8.  
9. transition: 1s;
10.  
11. -webkit-transform: rotate(20deg);
12.  
13. -ms-transform: rotate(20deg);
14.  
15. transform: rotate(20deg);
16.  
17. }

 

 

這樣子的。美觀大方。恩恩···

 

3：grunt-contrib-csslint

csslint ，他會幫咱們查出一些語法上的錯誤，什麼？css有什麼語法錯誤。其實也不算是錯誤，算是一些不規範的寫法吧。

好比說我寫了：display:inline-block;float:left;

那麼他就會報錯給你說：

不過他須要一個.csslintrc的配置文件，這個網上都有，能夠本身擴充或刪減，由於有的錯誤，是不必的。

 

4：grunt-csscomb

csscomb，他能夠把你寫的css按照最優的順序排出來，便於閱讀，並且也很規範，別人看到了這樣的css文件會特別的舒服。

好比我寫了這樣一堆亂七八糟的東西：···

 

1. .a{

2.  
3. position:absolute;width:100px;float:left;height:100px;display:block;top:20px;font-size:12px;line-height:20px;margin-top:30px;padding-left:10px;
4.  
5. transform:rotate(20deg);
6.  
7. }

 

 

那麼他會幫我編譯成:

1. .a {

2.  
3. position: absolute;
4.  
5. top: 20px;
6.  
7. display: block;
8.  
9. float: left;
10.  
11. width: 100px;
12.  
13. height: 100px;
14.  
15. padding-left: 10px;
16.  
17. margin-top: 30px;
18.  
19. font-size: 12px;
20.  
21. line-height: 20px;
22.  
23. -webkit-transform: rotate(20deg);
24.  
25. -ms-transform: rotate(20deg);
26.  
27. transform: rotate(20deg);
28.  
29. }

 

 

美美的。

固然他也須要本身的配置文件.csscomb.json
 

5：grunt-contrib-cssmin

顧名思義，文件壓縮。沒什麼好說的額。

配置方法你們能夠網上去找，或者直接去他們的github上看文檔，說的都很詳細。

以上就是css的grunt配置，合起來用，就能幫你寫出優雅的css文件。

轉自：http://www.php100.com/html/it/qianduan/2015/0115/8377.html