Gulp 定制专属提速“外挂”(下)

友情提示:推荐阅读时间10分钟 + 练习时间10分钟

上一期给大家分享了Gulp插件的安装与使用,只要掌握了Gulp插件安装的流程与配置,对于其他Gulp插件的使用基本上就没有太大的问题。毕竟Gulp的插件太丰富了,大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候,会遇到静态资源版本更新的问题,那么对于前端开发工程师来说,该如何解决这个问题?所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。

相关阅读:前端工程化 | 定制专属提速“外挂”(上)| 前端工程化 | 揭秘程序员的提速“外挂”

本文内容概要

  • Gulp解决静态资源版本更新的问题
  • package.json的作用
  • Gulp的小结

静态资源缓存更新的问题

为了让用户能够快速的访问网站,开发人员会对网站的静态资源做缓存处理,这样可以减少网站静态资源的加载。但是,又出现了一个新问题,当我们需要对网站做改版升级的时候,如何让缓存的静态资源失效。换句话说,只要把静态资源缓存下来,在缓存有效的时间内,用户访问网站时静态资源是从浏览器缓存里面加载而不是从服务器加载过来。如果想进一步了解“网站缓存”,可以发送关键字缓存到HTML5学堂公众号。如果网站的静态资源做了修改,如何保证用户访问的是最新的静态资源而不是缓存起来的静态资源?具体先来看看下面的几种解决方案。

为静态资源请求添加Query

这个理解起来比较简单,就是在静态资源请求后面添加参数,这个参数的值是时间戳和版本号的结合,当然也可以使用其它方式来计算该参数的值。

修改前

<!-- 代表结构 -->
<h2>梦幻雪冰</h2>


<!-- 代表静态资源 -->
<script type="text/javascript" src="index.js?v=201611131388" charset="utf-8"></script>
<script type="text/javascript" src="main.js?v=201611131388" charset="utf-8"></script>
<script type="text/javascript" src="list.js?v=201611131388" charset="utf-8"></script>

修改后

<!-- 代表结构 -->
<h2>HTML5学堂 - 码匠</h2>


<!-- 代表静态资源 -->
<script type="text/javascript" src="index.js?v=201611131389" charset="utf-8"></script>
<script type="text/javascript" src="main.js?v=201611131389" charset="utf-8"></script>
<script type="text/javascript" src="list.js?v=201611131389" charset="utf-8"></script>

这样看起来好像是可以解决掉静态资源缓存的问题,因为静态资源请求发生了变化。但是又出现了一个新问题,修改前后的静态资源文件名都是没有变化的,当开发人员把线下(本地)的文件覆盖掉线上(服务器)的文件,会出现一定的问题。因为在覆盖的过程中,静态资源和页面文件的部署有一定的时间间隔,对于一个大型网站来说即使时间间隔很小,都有可能出现新的用户访问。那在这个时间间隔内,用户访问网站会发生什么情况呢?

1、如果先覆盖index.html,后覆盖index.js,用户在这个时间间隔访问,会得到新的index.html引用旧的index.js的情况,从而出现错误的页面。

2、如果先覆盖index.js,后覆盖index.html,用户在这个时间间隔访问,会得到旧的index.html引用新的index.js的情况,从而也出现了错误的页面。

这也是一些互联网公司选择半夜这段时间等待访问低峰期再上线的原因之一。

基于文件内容的hash版本控制

对于静态资源缓存更新的问题,目前来说最优方案就是基于文件内容的hash版本控制了。

项目源代码

<!-- 代表结构 -->
<h2>梦幻雪冰</h2>


<!-- 代表静态资源 -->
<script type="text/javascript" src="index.js" charset="utf-8"></script>
<script type="text/javascript" src="main.js" charset="utf-8"></script>
<script type="text/javascript" src="list.js" charset="utf-8"></script>

发布的代码

<!-- 代表结构 -->
<h2>HTML5学堂 - 码匠</h2>


<!-- 代表静态资源 -->
<script type="text/javascript" src="index-46a6d95.js" charset="utf-8"></script>
<script type="text/javascript" src="main-367d728.js" charset="utf-8"></script>
<script type="text/javascript" src="list-e56e8e2.js" charset="utf-8"></script>

发布出来后JS被修改了文件名,产生了一个新文件,并不是覆盖已有的文件。其中“46a6d95”这串字符是根据js的文件内容进行hash计算出来的,只有文件内容发生变化了才会更改。由于这种不是采用同名文件覆盖,因此不存在上述说的那些问题。

因为它无法通过手工的形式来进行维护,所以需要借助工具来处理,在这边我们采用Gulp的插件来做处理。

使用Gulp对静态资源的处理

安装:gulp-asset-rev和gulp-rev插件

命令行:cnpm install gulp-asset-rev和cnpm install gulp-rev

提醒:gulp-asset-rev用于更改HTML文件引用静态资源的路径;gulp-rev用于修改静态资源的文件名。

在gulpfile.js中引入gulp-asset-rev和gulp-rev插件

  1. var assetRev = require('gulp-asset-rev');
  2. var rev = require('gulp-rev');

配置插件的功能

// 静态资源处理
gulp.task('revJS', function() {
    gulp.src('js/*.js') // 源文件下的所有js
    .pipe(rev()) // 修改静态资源的文件名
    .pipe(assetRev()) // 更改HTML文件引用静态资源的路径
    .pipe(gulp.dest('dist/js'));// 复制到目标文件路径
});


gulp.task('rev',['revJS'],function() {
    gulp.src("./**/*.html") // 源文件下的所有HTML
    .pipe(assetRev()) // 更改HTML文件引用静态资源的路径
    .pipe(gulp.dest('dist'));// 复制到目标文件路径
});

完整的配置代码

// 引入Gulp安装好的插件 require('模块名称')
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var assetRev = require('gulp-asset-rev');
var rev = require('gulp-rev');


// 定义一个f5任务,名称自定义即可
// 浏览器自动刷新
gulp.task('f5', function(){
    browserSync.init({
        server:{
            baseDir:'./'
        }
    });


    gulp.watch(['./**/*.html']).on('change', reload);
});


// 文件合并
gulp.task('concatFile', function () {
    // 需要合并的文件
    gulp.src('css/*.css')
    //合并后的文件名
    .pipe(concat('common.css'))
    // 合并后的文件所在的文件夹
    .pipe(gulp.dest('dist/css'));
});


// CSS文件压缩
gulp.task('cssMin', function() {
    // 需要压缩的CSS文件
    gulp.src('css/*.css')
    // CSS文件压缩
    .pipe(cleanCSS())
    // 压缩后的C文件所在的文件夹
    .pipe(gulp.dest('dist/css'));
});


// 静态资源处理
gulp.task('revJS', function() {
    gulp.src('js/*.js') // 源文件下的所有js
    .pipe(rev()) // 修改静态资源的文件名
    .pipe(assetRev()) // 更改HTML文件引用静态资源的路径
    .pipe(gulp.dest('dist/js'));// 复制到目标文件路径
});


gulp.task('rev',['revJS'],function() {
    gulp.src("./**/*.html") // 源文件下的所有HTML
    .pipe(assetRev()) // 更改HTML文件引用静态资源的路径
    .pipe(gulp.dest('dist'));// 复制到目标文件路径
});

查看处理效果

package.json的作用

安装插件的时候为何要将配置信息保存至package.json(package.json是nodejs项目配置文件)。

因为node插件包相对来说比较庞大,所以不加入版本管理,将配置信息写入package.json来进行版本管理,团队合作的时候方便成员下载所需要的包。(使用命令行:npm install,将会根据package.json下载所有需要的包)。另外,在其他项目也要使用Gulp的时候只要把gulpfile.js和package.json拷贝过去,再初始化Gulp就行了,而不用命令行来安装Gulp插件。

Gulp小结

到这边为止,对Gulp的分享算是告一段落了。合理的使用工具能够帮助我们提高开发效率,而不是把时间花在重复操作上面。最后,简单回顾Gulp的使用流程。

  1. ——>安装NodeJS
  2. ——>全局安装Gulp
  3. ——>项目安装Gulp
  4. ——>插件安装
  5. ——>配置gulpfile.js文件
  6. ——>运行Gulp任务

参考资料:

  • https://www.npmjs.com/package;
  • https://www.zhihu.com/question/28072766/answer/40642578

本文系HTML5学堂独家内容,转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-11-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏彭湖湾的编程世界

【计算机网络】 DNS学习笔记 (>﹏<)

参考书籍 《计算机网络-自顶向下》  作者 James F. Kurose DNS的作用 DNS是因特网的目录服务 DNS是因特网的目录服务,它提供了主机名到I...

24311
来自专栏惨绿少年

Nginx软件优化

1.1 Nginx优化分类 安全优化(提升网站安全性配置) 性能优化(提升用户访问网站效率) 1.2 Nginx安全优化 1.2.1 隐藏nginx版本信息优化...

4148
来自专栏移动开发

更改TabLayout选中的背景色

项目中有这种需求,google了下发现了解决方案,摘录如下方便大家排查. 原文链接

561
来自专栏HTML5学堂

移动端及时调试工具 - weinre使用方法

HTML5学堂:在前一篇文章当中,我们借着weinre讲解了NodeJS中的一些简单命令,也讲解了weinre的安装方法,今天我们把weinre的使用“完结”掉...

2673
来自专栏Pythonista

Golang之hello,beego

691
来自专栏ImportSource

教你看懂redis配置系列

摘要:最近工作中需要开发redis的一个云管理平台。所以要求要对这些参数了如指掌,特结合网络资料和自己翻译小撸此文。感谢junjie 【 简介】 我们可以在启动...

4359
来自专栏blackheart的专栏

[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)

在上一篇基于OIDC的SSO的中涉及到了4个Web站点: oidc-server.dev:利用oidc实现的统一认证和授权中心,SSO站点。 oidc-clie...

2318
来自专栏IT可乐

HTML中的超链接

超链接:也叫URL(Uniform Resource Locator),就是统一资源定位器。一般效果是我们点击网页上某个地方,网页会自动跳转到另外一个地方。 一...

1885
来自专栏Linyb极客之路

浅谈高性能数据库集群——读写分离

最近学习了阿里资深技术专家李运华的架构设计关于读写分离的教程,颇有收获,总结一下。

691
来自专栏小白课代表

《经验之谈》——Chrome浏览器的扩展程序(下载及安装)

一台电脑上可以没有QQ微信,可以没有office,也可以没有安全软件修图软件下载软件等各种软件,但是一定要有的就是浏览器。浏览器是我们与互联网进行交流最重要的渠...

855

扫码关注云+社区