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