【Gulp + 哈希】优雅的解决前端项目部署缓存问题-六虎

导言

在当今的数字化年代，网站功用优化成为了每个开发者都需求关注的重要问题。用户对网站拜访功率的要求越来越高，而作为开发者，咱们需求采取一些办法来提升网站的功用和用户体会。

在前端开发中，咱们大多数的项目都已经运用上了前端结构开发，比方：Vue.js，React.js，Angular.js 等等，这些大而全的结构不只能使开发迅速，还集成了各自独特的打包方法，编译后的文件名称都具有唯一性且随时更新。如下图所示，Vue.js 打包编译后生成的文件列表：

因而，运用这些结构开发的项目在布置后则不会呈现页面缓存的问题。然而，咱们公司也有些老项目，仍然在运用原生的 JavaScrip 形式开发，没有用任何的结构，最多运用了 Layui JQuery 等插件，因而根本上有些项目直接布置的源码，假如你修正了一个JS文件，试想一下，用户如果之前拜访过页面，阅读器并有了缓存，咱们修正完成后用户再次翻开了对应的页面，修正后的文件会不会及时更新呢？

答案是不会的，由于名称没有任何改动，阅读器认定是同一个文件，这就造成了非常欠好的体会。

仍然记住其时，自己修正完一个 JS 文件或 CSS 文件，还要跑去引证该文件的当地修正一下版别号，这样操作不只费事易犯错，还真是太 LOW 了，简直是噩梦！必须要改动，我的程序员偷懒素养不允许我这么做。

为了完成这个方针，咱们能够借助 Gulp 这个流式主动化构建东西。Gulp 供给了丰厚的插件和功用，使咱们能够轻松地主动化处理前端作业流程的各个环节。

在本文中，咱们将介绍怎么运用 Gulp 主动给页面增加 hash，并完成主动铲除缓存的功用。咱们将具体解说怎么装置 Gulp、创立项目和相关插件，以及怎么配置 Gulp 使命来完成主动化处理。

经过阅读本文，您将学习到以下内容：

装置 Gulp 及相关插件的进程；
创立 Gulp 使命，包括紧缩兼并资源文件和给文件增加唯一的 hash 值；
怎么运用 Gulp 主动生成带有 hash 的文件名，并批量替换在 HTML 中引证这些文件名。

一. Gulp 是什么

Gulp 是一款基于 Node.js 的前端构建东西，用于主动化使命的管理和构建前端项目。它的首要方针是简化开发进程中的使命，如文件紧缩、文件兼并、代码编译、图片紧缩、主动刷新阅读器等。

经过运用 Gulp，开发者能够经过编写简练、易于了解的使命代码，主动化履行各种常见的前端开发使命。Gulp 运用流（streams）的方法来处理使命，能够进步处理速度并节省系统资源。

Gulp 具有以下特点和优势：

简略易用：Gulp 运用简练的 API 和清晰的使命流程，使得开发者能够快速上手并编写可读性强的构建使命代码。
插件丰厚：Gulp 具有庞大的插件生态系统，开发者能够依据项目需求选择并运用相应的插件，从而扩展和定制构建使命。
高效功用：Gulp 运用流的方法处理使命，将文件加载到内存中进行处理，大大进步了使命履行的速度和功率。
主动化构建：Gulp 能够监视文件变化并主动履行相应的构建使命，使得开发者能够实时看到代码改动的效果，进步开发功率。

总之，Gulp 是一款强大而灵活的前端构建东西，能够协助开发者简化和优化前端开发进程，进步开发功率和项目质量。

二. 为什么要增加 hash

在前端布置中，经过增加哈希（hash）值到文件名中，能够完成缓存的铲除和更新。当文件发生变化时，哈希值也会发生变化这样能够保证文件名的唯一性。因而，在每次布置新的版别时，文件名会发生变化，阅读器将这些文件作为新的资源恳求，而不是运用之前缓存的旧文件。

经过增加哈希值到文件名中，完成铲除缓存的首要原理如下：

强制阅读器从头获取新的资源

阅读器缓存是依据恳求的资源 URL 来判断的，如果资源 URL 发生变化，阅读器就会认为这是一个新的资源，会发送恳求去获取最新版别的文件。

防止阅读器运用旧版别的文件

在不增加哈希值的情况下，如果阅读器缓存了某个文件，当服务器更新该文件，阅读器可能会继续运用旧版别的文件，由于缓存资源的 URL 与恳求的资源 URL 相同经过增加哈希值到文件名中，每次更新文件时，文件名都会发生改动，阅读器会认为这是一个新的资源，并从头恳求获取最新的版别。

经过铲除缓存，能够保证用户在拜访网页时获取到新的文件版别，防止呈现运用旧版别文件导致的问题。这关于前端布置和网站更新非常重要，能够供给更好的用户体会和保证网站的稳定性。

三. 建立环境

1. 装置 Gulp

首要，咱们需求装置 Gulp。翻开终端或指令行界面，履行以下指令：

npm install gulp-cli -g
npm install gulp -D

2. 创立项目

创立一个新的项目文件夹，并在该文件夹下初始化 npm，履行以下指令：

npm init -y

3. 装置相关插件

在项目根目录下，履行以下指令装置相关的 Gulp 插件：

在本项目中，咱们运用到了以下几个插件，以下是对这些 Gulp 插件的扼要阐明：

cross-env：用于处理在不同布置环境中统一设置环境变量的问题，使得开发者能够更加方便地进行开发和环境配置。
gulp-uglify：用于紧缩 JavaScript 文件，减少文件巨细并优化代码履行速度。
gulp-clean：用于删去指定文件或文件夹，常用于整理构建进程中生成的临时文件或旧版别文件。
gulp-clean-css：用于紧缩 CSS 文件，去除空格、注释和其他不必要的字符，以减小文件巨细。
gulp-rev：用于生成静态资源的哈希值并重命名文件，常用于缓存管理和版别操控，保证阅读器获取最新的文件。
gulp-rev-collector：用于替换 HTML 或 CSS 文件中引证的静态资源文件路径，将原始文件名替换为哈希后的文件名来保证缓存更新。
gulp-html-minifier2：用于紧缩 HTML 文件，去除空格、注释、删去无意义的标签等，以减小文件巨细。
gulp-zip：用于将文件或文件夹打包成 ZIP 格局的紧缩包，便于上传、发布或备份文件。

以上这些插件都是为了改善前端项目的开发和构建流程而开发的，经过主动化履行这些使命，能够进步前端项目的功用、优化代码，并简化开发者的作业流程。下面咱们运用指令先装置好这些插件

npm install cross-env gulp-uglify gulp-clean gulp-clean-css gulp-rev gulp-rev-collector gulp-html-minifier2 gulp-zip -D

四. 开发 Gulp 使命

在项目根目录下，创立一个为 gulpfile.js 的文件，接下来咱们逐步进行完善它：

1. 导入插件

首要，在 gulpfile.js 文件中引进相关的插件并界说，还需求界说一些大局的变量，便于后续运用。

const { series, src, dest } = require("gulp");
const uglify = require("gulp-uglify");
const cleanCSS = require("gulp-clean-css");
const rev = require("gulp-rev");
const revCollector = require("gulp-rev-collector");
const clean = require("gulp-clean");
const htmlmin = require("gulp-html-minifier2");
const zip = require("gulp-zip");
const pkg = require("./package.json");
// 源文件映射文件目录
const revDir = process.env.NODE_ENV === "production" ? "prod" : "dev";
// ZIP紧缩包名
const zipName = pkg.name   ".zip";

2. 完成复制

将源码文件夹保留不更改，从头界说一个 dist 文件夹用于编译生成的源码文件，rev 文件夹用户生成 hash 值变量的文件。

留意：复制之前，需求删去 dist 和 rev文件夹，防止出产重复文件

/**
 * 删去 `dist` 和 `rev`
 * 防止出产重复文件
 */
function clear() {
  return src(["dist", "rev"], { allowEmpty: true }).pipe(clean());
}
/**
 * 复制静态资源文件
 */
function assets() {
  return src("src/assets/**/*.*").pipe(dest("dist/assets/"));
}
/**
 * 复制 css 文件
 */
function css() {
  return src(["src/css/**/*.css"]).pipe(dest("dist/css"));
}
/**
 * 复制 js 文件
 */
function js() {
  return src(["src/js/**/*.js"]).pipe(dest("dist/js"));
}
/**
 * 复制 html 文件
 */
function html() {
  return src("src/views/**/*.html").pipe(dest("dist/views/"));
}

3. 紧缩页面

在这里，咱们首要进行了紧缩 Html 页面中的代码，包括引证的 JavaScript 代码以及 CSS 代码

/**
 * 紧缩 html 页面
 */
function htmlMinify() {
  return src("dist/views/**/*.html")
    .pipe(
      htmlmin({
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true,
        removeComments: true,
      })
    )
    .pipe(dest("dist/views/"));
}

4. 增加 hash 值

重头戏来了，利用 gulp-rev 插件生成 hash 值，首要包括：引证的 JS、CSS 等文件

/**
 *  Css 文件后边加 hash 值
 */
function cssRevHash() {
  if (process.env.NODE_ENV === "production") {
    return src("dist/css/**/*.css")
      .pipe(rev())
      .pipe(cleanCSS({ compatibility: "ie8" }))
      .pipe(dest("dist/css/"))
      .pipe(rev.manifest())
      .pipe(dest(`rev/${revDir}/css`));
  } else {
    return src("dist/css/**/*.css")
      .pipe(rev())
      .pipe(dest("dist/css/"))
      .pipe(rev.manifest())
      .pipe(dest(`rev/${revDir}/css`));
  }
}
/**
 * Js 文件后边加 hash 值
 */
function jsRevHash() {
  if (process.env.NODE_ENV === "production") {
    return src("dist/js/**/*.js")
      .pipe(rev())
      .pipe(uglify())
      .pipe(dest("dist/js/"))
      .pipe(rev.manifest())
      .pipe(dest(`rev/${revDir}/js`));
  } else {
    return src("dist/js/**/*.js")
      .pipe(rev())
      .pipe(dest("dist/js/"))
      .pipe(rev.manifest())
      .pipe(dest(`rev/${revDir}/js`));
  }
}
/**
 * 将 rev 目录下的 hash 文件替换掉 html 中对应的源文件链接
 */
function htmlRevInject() {
  return src([`rev/${revDir}/**/*.json`, "dist/views/**/*.html"])
    .pipe(revCollector({ replaceReved: true }))
    .pipe(dest("dist/views/"));
}

5. 生成 Zip 包

运用gulp-zip将文件或文件夹打包成 ZIP 格局的紧缩包，便于上传、发布或备份文件。

/**
 * 打包生成Zip
 */
function generateZip() {
  return src("dist/**/*").pipe(zip(zipName)).pipe(dest("dist"));
}

6. 区别环境

利用cross-env运行使命时，增加环境变量，用于区别出产和开发环境，能够定向的做一写打包区别优化。比方：

在出产环境下，代码进行紧缩、生成 Zip 包用于快速发版等
在开发环境下，未便于调试查看源码的，能够不进行代码紧缩机整理等

// 出产环境下履行
if (process.env.NODE_ENV === "production") {
  exports.build = series(
    clear,
    assets,
    css,
    js,
    html,
    cssRevHash,
    jsRevHash,
    htmlRevInject,
    htmlMinify,
    generateZip
  );
}
// 开发环境下履行
else {
  exports.build = series(
    clear,
    assets,
    css,
    js,
    html,
    cssRevHash,
    jsRevHash,
    htmlRevInject
  );
}

7. 运行 Gulp 使命

在终端或指令行界面中，进入项目根目录，履行以下指令进行构建：

# development 环境
cross-env NODE_ENV=development gulp build
# production 环境
cross-env NODE_ENV=production gulp build

履行结束后，你会在 dist 目录下看到生成的带有 hash 后缀的文件。

五. 布置验证

当咱们要更新网站代码并发布新版别时，删去之前的缓存文件，将咱们最新生成的 dist 文件夹复制到服务器下面。布置成功后能够清晰的看见最新代码有没有更新成功。如下图所示：

能够清楚的看见，引证的 JS 和 CSS 文件都加上了主动生成的一串字符

经过这种方法，咱们完成了主动给页面增加 hash 和完成主动铲除缓存的根本演示，轻松进步网站的功用，改善用户的拜访体会。

总结

优化网页功用和提升用户体会一直是前端开发的重要使命之一。在前端布置中，为了处理文件缓存导致用户阅读旧版别文件的问题，咱们能够经过运用 Gulp 主动给页面增加哈希（hash）来完成缓的铲除和更新。咱们在具体介绍了怎么运用 Gulp 完成该功用。

首要，咱们了解了为什么增加哈希值到文件名中能够铲除缓存。经过增加哈希值，咱们能够完成以下两个方针强制阅读器从头获取新的资源和防止阅读器运用旧版别的文件。

其次，咱们学习了怎么运用 Gulp 完成主动增加哈希值的功用。经过运用 gulp-rev 插件，咱们能够在文件名中增加哈希值，并生成带有哈希值的文件。然后，经过运用 gulp-rev-replace 插件，咱们能够主动更新 HTML 文件中资源的引证路径，保证引证的是带有哈希值的最新文件。

尽管说，现在开发都用上了极速的结构，结构也已经内置了这种方法，但是也不排除有些老项目仍然会运用原生的开发方法。

总的来说，经过运用 Gulp 主动给页面增加哈希，并运用合理的缓存战略，咱们能够很好地处理文件缓存导致的问题，供给更好的用户体会和网站的稳定性。希望本文对你了解和应用 Gulp 构建东西在前端布置中的作用有所协助。

【Gulp + 哈希】优雅的解决前端项目部署缓存问题

导言