首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Gulp实现cssjs图片的压缩以及cssjs文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩、图片转base64、cssjs的压缩以及合并,文件的md5重命名 ……。...目前index.html文件中的cssjs的引用路径是这样的,如下图: ? 其他目录下的html文件也是这样的,都引用的是未压缩和md5命名的cssjs文件。...compress-css','compress-js'], function() { //- compress-css和compress-js任务执行完毕再执行rev-index任务...运行完该命令后会生成以下三个目录:dist、rev-css、rev-js。其中dist目录下就是新的html文件、css文件、js文件和图片,目录和之前的webContent目录下的结构是一样的。...所有的cssjs文件都加了md5命名了,所有的图片体积也小了,但用肉眼看不出来图片质量有变化。 此时dist目录下所有的html文件引用的cssjs的引用路径都变成带有md5命名的了。

    12.1K80

    CSS in JS

    由于 CSS 的封装非常弱,导致了一系列的第三方库,用来加强 React 的 CSS 操作。它们统称为 CSS in JS,意思就是使用 JS 语言写 CSS。...根据不完全统计,各种 CSS in JS 的库至少有47种。老实说,现在也看不出来,哪一个库会变成主流。 ?...5、 上周,我看到一个新的 CSS in JS 库,叫做 polished.js。它将一些常用的 CSS 属性封装成函数,用起来非常方便,充分体现使用 JavaScript 语言写 CSS 的优势。...我觉得这个库很值得推荐,这篇文章的主要目的,就是想从这个库来看怎么使用 CSS in JS。 首先,加载 polished.js。...text-overflow': 'ellipsis', // 'white-space': 'nowrap', // 'word-wrap': 'normal' // } hideText用于隐藏文本,显示图片

    6.2K40

    CSS 制作雪碧图列表

    在日常开发列表中会有很多的小图片,例如上图列表中的1-5小图标。如果每个小图片都分为一个小图片进行请求。这样就需要请求5次服务器。...为了减少这种性能消耗,可以考虑将这些小图标放到一个大图片中,然后使用背景图片的位置属性呈现不同的图标即可。 如果不清楚背景图片的位置属性相关知识,可以访问这里。...那么开发上面的这个雪碧图列表,需要准备什么? 需要准备图片 ? 准备图片 好了,这里只要右键保存图片,下面就可以跟着一起来演练一下操作。 首先使用ul写出基本框架来 ?...好了,有了基本框架下面只要将小图片逐个使用背景图片放入即可。 使用背景图片设置小图标 ? 调整背景图片的位置,显示不同的小图标 ? 只要调整背景图片的位置,就可以呈现不同的小图标了。

    1.7K30
    领券