WEB项目构建优化之自动清除CSS中的图片缓存
在web项目构建发布时,经常遇到css中图片的修改优化,那么如何清除图片的缓存成为必须要解决的问题。曾经有过傻傻的方法就是直接在图片后面添加随机数。今天主要是从构建自动化方式来解决这个问题,提高开发及发布的效率,让项目向工程化方向靠拢。
在解决这个前,也陆续找了许多方案,像gulp-modify-css-urls,feWorkflow,还有淘宝的一款工具,不过找不到源代码,不知是否开源,要么是不满足,要么就是太重。于是决定参考gulp-modify-css-urls,基于gulp写了一个简单又满足需求的gulp模块来完成这件事情,命名为:gulp-custom-css-urls。
### 这个模块满足下面需求:
- 开发和生产环境代码分开。
- 构建发布自动化。
- 跳过图片地址是data:;base64格式。
- 跳过http,https等网络能直接访问的地址。
- 支持输出图片,以便上传至CDN。
### 用法:
var customCssUrls = require('gulp-custom-css-urls');
var gulp = require('gulp');
var path = require('path');
gulp.task('demo',function(){
return gulp.src('assets/**/*.css')
.pipe(customCssUrls({
/**
* static filepath relative absolute filepath's physical position.
* eg:
* image path inline css is '/images/demo.png',
* image absoulte filepath is '/Users/Navy/Desktop/code/demo/assets/images/demo.png',
* the process(process.cwd()) path is '/Users/Navy/Desktop/code/demo',
* so the image path relative website root path is 'assets/'
*/
staticfile_relative_website_rootpath: 'assets/',
outputImage: true, // output images file , default to false
outputImage_path: './.gulp_dist_output_images', // default to './.gulp_dist_output_images'
modify: function (imageRelativePath, cssFilePath, imageRelativeWebsiteRootPath, imgInfo) {
// modify image url before prepend or append
// the imgInfo param is object, {hash: 3503865059, width: 1782, height: 530, orgin_filename: 'custom.png'}
return path.join(imageRelativeWebsiteRootPath, path.basename(imageRelativePath)); //let the relative path become an absolute path
},
prepend: '', // prepend string before image url
append: '', // append string after image url
processPath: process.cwd() // custom process path , default to process.cwd()
}))
.pipe(gulp.dest('tmp/'));
})
gulp.task('default',['demo']);
源码地址:https://github.com/navyxie/gulp-custom-css-urls
WEB项目构建优化之自动清除CSS中的图片缓存的更多相关文章
- [原创作品] web项目构建(一)
今天开始,将推出web项目构建教程,与<javascript精髓整理篇>一并更新.敬请关注. 这篇作为这一系列开头,主要讲述web项目的构建技术大全.在众多人看来,web前端开发无非就是写 ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
- asp自动解析网页中的图片地址,并将其保存到本地服务器
程序实现功能:自动将远程页面的文件中的图片下载到本地. 程序代码 <% '将本文保存为 save2local.asp '测试:save2local.asp?url=http://ent.sina ...
- (8/24) 图片跳坑大战--css中的图片处理
前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码.上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文 ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- CSS中背景图片的background-position中的left top到底是相对于谁的?
在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
随机推荐
- 折腾了两天的跨站脚本提交问题,与IIS7有关
根据这里提供的方法,本地测试通过没有问题,但是部署到服务器上之后,只有GET请求可以跨站提交,POST请求继续报错,折腾了两天之后觉得,是不是IIS7的问题?果然,找到了这篇文章,照做之后解决.
- Replication--修改复制代理配置来查看代理运行情况
1>在复制监视器中选中订阅右键 2>选择代理配置文件 3>将代理配置文件设置为”详细历史记录代理配置文件“,确定以保存 4>重启代理 5>代理运行一段时间后,重启代理 6 ...
- 学习做爬虫-vs2017
最近新装了vs2017,安装过程发生了很大的变化,操作变的更加容易了. 下载vs安装程序进行安装.更新界面如图所示,我选择了安装免费个人版(这个是已安装的更新界面,和安装界面差不多) 如图所示,这样的 ...
- 把windows电脑变成路由器使用
实用小技巧1 把windows电脑变成路由器使用 适用对象: windows7.windows8的笔记本电脑或者有无线网卡的台式电脑 网络要求: CMCC-EDU和家里拨号上网的都可以,但是电信的校园 ...
- Java中获取运行代码的类名、方法名
以下是案例,已运行通过 package com.hdys; /* * 1.获取当前运行代码的类名,方法名,主要是通过java.lang.StackTraceElement类 * * 2. * [1]获 ...
- zabbix前端添加平台脚本监控
1.在前端创建脚本 2.添加监控配置 # 这里添加的监控为ping命令,用来探测网络的可用性. # 这里添加的监控为traceroute命令,用来探测网络的可用性. # 这里添加的监控为nmap命令, ...
- Blocks to Cubes
Bholu the Pandit on this New Year wanted to divide his Cuboidal Packaging block into cubes. But he l ...
- OCP考试最新052题库分析整理-28
28.Which two are true about external tables? A. They support the ORACLE_DATAPUMP access driver. B. T ...
- vue.js 知识点(三)
---恢复内容开始--- vue和react相同,都是单项数据流,也就是只能从父组件流向子组件,但是因为根据引用的不同,子组件也是可以经过函数处理流向父组件的!这点跟react十分相似,但是也有不同: ...
- bzoj1009GT考试
题目链接 没啥好说的,矩阵优化+$kmp$字符串匹配 上代码: /************************************************************** Prob ...