深圳Web培训
达内深圳罗湖中心

185-8886-4961

热门课程

如何把CSS中的图片自动部署到CDN上?

  • 时间:2016-07-28
  • 发布:深圳Web培训
  • 来源:达内新闻

今天深圳达内web前端培训(sz.web.tedu.cn)专家主要和大家分享如何在WEB项目构建发布时把CSS中的图片自动部署到CDN上。主要借助gulp的两个模块gulp-custom-css-urls和gulp-cdn-service。

主要是处理CSS中的图片,统一转化图片的路径为相对于站点的根目录,并且按图片名字、尺寸、内容重命名图片,方便缓存的自动清理。

gulp-cdn-service主要是对gulp-custom-css-urls输出的图片进行上传至CDN处理。目前只支持上传到七牛的CDN。该模块还有一个特点就是,对于已经上传的图片不会再次进行上传,提高项目构建发布的速度。

下面是结合gulp-cdn-service和gulp-custom-css-urls的一个例子:

1、gulpfile.js的配置内容,红色框为七牛CDN的地址。

2、执行gulp命令构建:

3、构建完成的CSS内容(注意红色框):

4、登录你七牛的账号,查看上传是否成功:

至此,整个web项目的图片发布流程就完成了。

另外假如CDN服务器down掉了,我们还是可以降级到图片地址使用我们自己站点的,只需把gulp-custom-css-urls中的配置prepend去掉和gulp-cdn-service中的uploadToCdn task 去掉即可,如下图:

去掉CDN地址后,CSS输出结果(图片相对于站点根目录,起到降级作用,站点访问不受CDN服务影响):

小结:

1、支持项目图片构建发布时把图片上传至七牛CDN服务

2、已上传至CDN的图片不会再次上传,加快构建发布速度

3、只能的图片命名方式(名字+尺寸+内容+后缀名),自动清除CDN缓存

4、当CDN服务出问题时,可以降级为站点的访问,不影响用户使用。

如果想学习的同学可以参加深圳达内web培训, 免费试听,或周末免费参加深圳web培训公开课程试听,这里有强大的师资阵容,“师者,所以传道授业解惑也”,讲师,是教育的主体,是影响整体办学质量、 学员学习质量的重要因素。所以深圳达内 web培训竭尽全力为学员提供最强大的师资力量,让学员接受最好的教育,学习最前沿的技术。

掌握一门牛逼闪闪技术,待遇自然不在话下。 选择培训机构等于选择未来开发行业的根基,优秀的web培训机构不仅仅是传授专业开发知识,更重要的是培养学员的开发思维和动手能力,可谓授人以鱼不如授 人以渔!而这些,达内可以做到!

上一篇:Web测试有哪些技巧?
下一篇:【达内Web教程】WEB Fuzz中需要关注的7种响应

精确流量调度新思路-HttpDNS服务

构建一站式AJAX Web应用的开发框架

JQuery 之父: 好好学习 天天编码

从Bootstrap到 Amaze跨屏适配兼容更精彩

选择城市和中心
贵州省

广西省

海南省