课程咨询 :185-8886-4961
课程咨询qq:2377096605

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

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

  • 今天深圳达内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种响应

最新开班日期  |  更多

WEB前端工程师--全日制班

WEB前端工程师--全日制班

开班日期:7月31日

WEB培训前端工程师--周末班

WEB培训前端工程师--周末班

开班日期:7月31日

WEB培训免费训练营一期

WEB培训免费训练营一期

开班日期:7月31日

WEB培训免费训练营二期

WEB培训免费训练营二期

开班日期:7月31日

  • 罗湖校区地址:深圳市福田区八卦四路 22 号华晟达大厦 408
  • 课程培训电话:185-8886-4961
    课程咨询qq:2377096605     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56