本文中,苏南大叔描述如何利用grunt处理css文件。注意:本文仅描述普通的css文件,不涉及less/scss/sass等编译类型的css相关语言。主要的目的,就是压缩合并处理css文件。以求达到减少页面内的资源请求数量的目的。

描述的主战场依然是Gruntfile.js这个配置文件,本文的测试环境是:grunt 1.3.1

安装grunt构建工具

grunt构建工具的安装,是有些奇怪的。需要全局安装grunt-cli,然后本地安装grunt。本篇文章里面,不做详细描述。可以参考下面这个链接:

执行grunt获得all.min.css

执行grunt命令,就可以获得all.min.css了。

grunt

苏南大叔:如何使用 grunt 插件压缩合并 css ?加快页面渲染速度的秘诀 - grunt-css
如何使用 grunt 插件压缩合并 css ?加快页面渲染速度的秘诀(图2-2)

总结

使用grunt压缩合并css的操作,和压缩合并js的操作,基本类似。都是分为min压缩和contact合并两部分。唯一需要注意的就是,相关资源的引用问题。js的这种问题,并不明显。但是css的图片问题,比较明显罢了。

更多grunt经验文字,请点击:https://newsn.net/tag/grunt

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    grunt

本站的忠实读者小伙伴,正在阅读下面这些文章: