防止js css 发版本的时候缓存(node工具)

1.创建如下js文件 addVersion.js

/*
 * 
 * @description 版本更新需要手动清理浏览器缓存,仅仅针对 css与js  
 * 
 * html通过设置meta标签 或者 配置ngnix 不缓存html来实现
 *  
 *  配置header示例
 *  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 *  <meta http-equiv="Pragma" content="no-cache" />
 *  <meta http-equiv="Expires" content="0" />
 *  
 *  Nginx设置Js、Css等静态文件的缓存过期时间 https://www.cnblogs.com/kgdxpr/p/4903367.html
 *  eg:
 *  location ~.*\.(js|css|html|png|jpg)$
 *  {
 *      expires    1d;
 *  }
 *
 */

var fs = require('fs')
var glob = require("glob")

var RegCss = /<link\s.*href\s?=\s?["|'](.*?)['|"].*>/g
var RegJs = /<script\s.*src\s?=\s?["|'](.*?)['|"].*><\/script>/g
var RegCssOrJs = /(<link\s.*href\s?=\s?["|'](.*?)['|"].*>)||(<script\s.*src\s?=\s?["|'](.*?)['|"].*><\/script>)/
/***
 * 通过正则匹配html中的link 标签和 script标签,给 href属性和 src属性增加 ?version=new Date(),防止浏览器缓存
 * js与css 
 */
function addVersion(htmlText) {
    var version = +new Date()
    htmlText = htmlText.replace(RegJs, function (match, p1) {
        if (/\?version=/.test(p1)) {
            return match
        }
        if (/min\.js$/.test(p1)) {//以min.js结尾的不替换
            return match
        }
        return match.replace(p1, p1 + '?version=' + version)
    })
    htmlText = htmlText.replace(RegCss, function (match, p1 ) {
        if (/\?version=/.test(p1)) {
            return match
        }
        if (/\.min\.css$/.test(p1)) {
            return match
        }
        return match.replace(p1, p1 + '?version=' + version)
    })

    return htmlText
}

/***
 * 用于过滤需要忽略掉的html文件
 */
function ignoreFilter(item) {

    var regExps = [
        /\/template\//,//首页的模板文件夹
        /content\/ui\//,//HTML片段,可忽略
        /node_modules\//,//HTML片段,可忽略
        /component\//    //angular组件,可忽略
    ]
    return regExps.every(regexp => !regexp.test(item))

}
//这里的glob匹配根据项目实际目录修改
glob('../**/*.html', {}, function (err, files) {
    files = files.filter(ignoreFilter)
    console.log(files);
    files.forEach(function (file) {
        fs.readFile(file, 'utf-8', function (err, data) {
            if (!RegCssOrJs.test(data)) {//如果没有css和js外链,直接return掉,增强性能
                return
            }
            data = addVersion(data)
            fs.writeFile(file, data, 'utf-8', function (err) {
                if (err) {
                    return
                }
                console.log('文件:%s--修改成功', file);

            })
        })
    })
})

2.使用yarn 或者npm 安装glob 依赖

npm init -y
yarn add glob

3.node 执行该文件

node addVersion.js