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 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

1.CSS Reset

浏览器对标签进行了默认设置,所以在我们没有定义样式的时候,会有五花八门的效果 不同的浏览器设置的默认样式是由差异,效果也会有差异。 因为浏览器对标签进行设置...

722
来自专栏全沾开发(huā)

NPM实用指北

NPM实用指北 npm作为下载node附送的大礼包,大家一定不会陌生。 然而关于npm,估计大量的只是用到npm install XX...

35610
来自专栏极客慕白的成长之路

Atom主题插件美化教程

对应的Themes就是可更换的主题。在这一共分为两块,UI Theme和Syntax Theme,一个是UI的,一个是文件语法的,这里可以选择相应的主题。

682
来自专栏数据库

Mysql自动化快速安装部署

Mysql自动化快速安装部署 一、简介 软件开发实际生产测试过程中,时常用到Mysql数据库,人工的去部署和安装新的Mysql服务器,不仅配置复杂过程缓慢,并且...

2316
来自专栏前端人人

React多页面应用6(gulp自动化发布到多个环境、生成版本号、压缩成zip等)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括...

3195
来自专栏hbbliyong

win8快捷键大全分享,非常全

Windows 8全新的Metro操作体验,对于没有平板只能用快捷键来提高效率了。全面的Windows 8快捷键,请下载微软官方的Windows 8快捷键表格,...

2624
来自专栏数据小魔方

如何将html格式动态图表网页嵌入ppt中

前几天魔方学院(其实就是我的公众号交流群啦~_~)的一位群友突然在群里提了一个问题! 看了之前推送的REmap相关内容,结果导出的图表是html格式的动态图,不...

9547
来自专栏米扑专栏

Python+Selenium2 搭建自动化测试环境

27311
来自专栏KK的小酒馆

Android开发环境搭建Android应用界面开发

Jdk下载: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2...

692
来自专栏翻译

在Centos 7上安装Java

Java是一个功能强大的编程语言,用Java编写的软件可以在任何系统上编译并且运行。与Python和C不同,Java不会预先安装在Linode的分发映像上。而O...

601

扫描关注云+社区