开发者资讯

 首页 > 开发者资讯 > 前端技术 > grunt前端打包——css篇

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文件。

分享到:
用CSS美化你的滚动条 
   本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色,调整它们的外形,适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器。 各种浏览器对CSS滚动条的支持情况 这里说的Webkit浏览器包括谷歌浏览器,苹果公司...
前端开发规范之html编码规范
原则 1.规范 。保证您的代码规范,趋html5,远xhtml,保证结构表现行为相互分离。 2.简洁。保证代码的最简化,避免多余的空格、空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。 3.实用。遵循标准,但是不能以牺牲实用性为代价。 4.忠诚...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……