介绍
在前端开发过程中，版本号一直是一个比较麻烦的问题，如果文件内容被修改，为了避免缓存出现问题，我们通常会在链接上添加版本号。虽然手动添加可以解决这个问题，但是随着项目的增加和复杂度的提高，手动维护版本号会变得越来越困难，这时候我们会想到使用自动化构建工具来生成版本号。
gulp-addhashsuffix 是一个npm包，用于自动在链接上添加版本号，同时还支持将文件名 hash 化，以进行缓存控制。
安装
gulp-addhashsuffix 可以通过 NPM 安装。
npm install gulp-addhashsuffix --save-dev
使用
在使用前需要先将 gulp-addhashsuffix 引入项目。
var addHashSuffix = require('gulp-addhashsuffix');简单示例
var gulp = require('gulp');
var addHashSuffix = require('gulp-addhashsuffix');
gulp.task('add_hash_suffix', function(){
gulp.src('src/*.css')
.pipe(addHashSuffix())
.pipe(gulp.dest('dist'));
});上面的代码就是一个简单的使用示例，将 src 目录下的所有 .css 文件添加版本号后输出到 dist 目录下。
参数
addHashSuffix() 方法支持多种参数来满足我们的需求。
Parameters
options.hashType
类型：String
默认值：'md5'
说明：指定文件内容 hash 算法类型，可选值：'md5'，'sha1'，'sha256'
options.hashLength
类型：Number
默认值：8
说明：指定文件内容 hash 值长度。
options.separator
类型：String
默认值：.
说明：指定版本号与文件名的连接符号。
options.skipFiles
类型：RegExp|Function
默认值：undefined
说明：指定需要跳过文件的文件名。如果是正则表达式，匹配到的文件不会被添加版本号。如果是回调函数，返回值为 true 的文件也不会被添加版本号。
options.skipFileTypes
类型：Array
默认值：undefined
说明：指定需要跳过文件的文件类型。例如：['html', 'ejs']，会跳过所有 .html 和 .ejs 文件。
示例
-- -------------------- ---- -------
--- ---- - ----------------
--- ------------- - ------------------------------
---------------------------- -----------
---------------------
---------------------
--------- -------
----------- ---
---------- ----
-------------- -------- -------
---------- -------- ------ -
------ -----------------------------
-
---
-------------------------
---上面的代码使用了各种参数来展示 addHashSuffix() 方法的灵活性。
完整示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ------------
----- ---------------- ------------------------------------
-------
------
--------- ----------
------- ------------------------------------------
-------
--------- -------------------- ---- -------
--- ---- - ----------------
--- ------------- - ------------------------------
---------------- ---------- -
------ ---------------------------
----------------------
---------------------------
---
--------------- ---------- -
------ -------------------------
---------------------
---------- ---
---
---------------------------
---
-------------------- ------- -------这里我们提供了一个完整的示例，通过这个例子可以更好地理解 gulp- addhashsuffix 的使用。
结论
gulp-addhashsuffix 是一个非常实用的工具，通过使用它可以避免手动处理版本号的麻烦，减少代码维护的复杂度。当然，在使用前需要充分理解使用方法和参数，了解自己的需求，这样使用起来才会更加方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66cf