{"id":20926208,"url":"https://github.com/weidemo/gulp-revfile","last_synced_at":"2025-05-13T17:33:34.269Z","repository":{"id":82039121,"uuid":"94427442","full_name":"WeideMo/gulp-revfile","owner":"WeideMo","description":"🔖A web pages Demo works for avoiding cache by appending file hash in file request string:index.css-\u003eindex.css?v=ffcf8558f4","archived":false,"fork":false,"pushed_at":"2017-06-15T11:40:15.000Z","size":61,"stargazers_count":20,"open_issues_count":0,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-02T05:23:03.141Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WeideMo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-15T10:12:52.000Z","updated_at":"2019-06-26T02:58:32.000Z","dependencies_parsed_at":"2023-05-04T05:02:47.405Z","dependency_job_id":null,"html_url":"https://github.com/WeideMo/gulp-revfile","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeideMo%2Fgulp-revfile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeideMo%2Fgulp-revfile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeideMo%2Fgulp-revfile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeideMo%2Fgulp-revfile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WeideMo","download_url":"https://codeload.github.com/WeideMo/gulp-revfile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253993716,"owners_count":21996366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T20:37:14.869Z","updated_at":"2025-05-13T17:33:34.155Z","avatar_url":"https://github.com/WeideMo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-revfile\n\n\u003e A web pages Demo works for avoiding cache by appending file hash in file request string\n\u003e `index.css` → `index.css?v=ffcf8558f4`\n\n\n## Install（安装）\n\n\u003eclone or download this repository：克隆或者下载gulp-revfile仓库\n```\n$ npm install -g gulp\n```\n```\n$ npm install \n```\n\n## API(调用方法)\n\n\u003e Fetch source file：获取源文件\n\n```js\ngulp.src('assets_dev/js/**/*.js')\n```\n\u003e `rev()` Read file contents ready for generation：读取文件准备生成\n\n```js\ngulp.src('assets_dev/images/**/*.jpg')    \n    .pipe(rev());\n```\n\n\u003e `rev.manifest()` Generate file hash version：生成文件hash版本号\n\n```js\ngulp.src('assets_dev/images/**/*.jpg')    \n    .pipe(rev())\n\t.pipe(rev.manifest());\n```\n\u003e `revCollector()` Writes the static resource version number to the target HTML file：写入目标网页文件\n\n```js\ngulp.src([ PATH_REV_JSON, PATH_SRC_HTML ])\n    .pipe(revCollector({\n        replaceReved:true\n    }));\n```\n\n## Usage\n\n\u003e Dependency prefix：依赖前置\n\n```js\n//gulpfile.js\nvar gulp = require('gulp');\nvar uglify = require('gulp-uglify');\nvar rev = require('gulp-revm');\nvar revCollector = require('gulp-revm-collector');\nvar cssmin = require('gulp-minify-css');\n```\n\n\u003e Constant definition：定义常量路径\n\n```js\n//gulpfile.js\nvar PATH_SRC_HTML = 'srcPages/**/*.html';\nvar PATH_DES_HTML = 'destPages/';\nvar PATH_REV_JSON = 'rev/**/*.json';\n```\n\n\u003e Files watch：文件监控触发任务\n\n```js\n//gulpfile.js\ngulp.task('watchChange',function() {\n    console.log(\"watcher has started\");\n    gulp.watch('assets_dev/js/**/*.js', ['rev_js']);\n    gulp.watch('srcPages/**/*.html',['rev_html']);       \n});\n```\n\n\u003e Gulp task define：gulp处理任务定义\n\n```js\n//gulpfile.js\n/*----------javascript MD5 version process----------*/\ngulp.task('jsmin', function() {    \n   return gulp.src('assets_dev/js/**/*.js')\n    .pipe(uglify())\n    .pipe(rev())\n    .pipe(gulp.dest('assets/js')) \n    .pipe(rev.manifest())\n    .pipe(gulp.dest('rev/js'));   \n});\n\n/*----------reversion Javascript deps on task[jsmin]----------*/\ngulp.task('rev_js',['jsmin'],function(cb){\n    gulp.src([ PATH_REV_JSON, PATH_SRC_HTML ])\n    .pipe(revCollector({\n        replaceReved:true\n    }))\n    .pipe(gulp.dest( PATH_DES_HTML ));\n    cb();\n});\n\n/*----------reversion html pages----------*/\ngulp.task('rev_html',function(cb){   \n    gulp.src([ PATH_REV_JSON, PATH_SRC_HTML ])\n    .pipe(revCollector({\n        replaceReved:true\n    }))\n    .pipe(gulp.dest( PATH_DES_HTML ));\n    cb();\n});\n```\n\n\u003e Start gulp task(default:watchChange)：启动默认监听任务:watchChange\n\n```\n$ gulp  watchChange\n```\n\u003eEdit any file that under watch: `javascript`,`css sheet` even and `images`:编辑任何监控任务下的文件\n\nThe corresponding file automatically generates the version number based on the hash value of the file, which is generated in the `rev` directory.\n\n对应的文件会根据文件的哈希值自动生成版本号生成在rev目录下。\n\nAt the same time, gulp will according to rev under the hash version number, and read the srcPages file under the HTML page, and the version number is added to the destPages file.\n\n同时，gulp会根据rev下的hash版本号并读取srcPages文件下的html页面并将版本号加入到destPages文件下。\n\n## Effect（效果）\n\n\u003e Source page \n```html\n\u003c!--srcPages/html--\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003egulp-revDemo\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"../assets/css/index.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"title\"\u003eEasily make static files hash versions with [gulp-revm \u0026 gulp-revm-collector]:\u003c/div\u003e\n    \u003cdiv class=\"subTitle\"\u003eAlso works for javascript,css,images and so on...\u003c/div\u003e\n    \u003cimages class=\"img\"  src=\"../assets/images/demo.jpg\"\u003e\u003c/images\u003e\n\u003c/body\u003e\n\u003cscript src=\"../assets/images/js/jquery-1.10.2.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../assets/images/js/testJs_1.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../assets/images/js/testJs_2.js\"\u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n\u003e Dest page \n```html\n\u003c!--srcPages/html--\u003e\n\u003c!DOCTYPE html\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003egulp-revDemo\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"../assets/css/index.css?v=ffcf8558f4\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"title\"\u003eEasily make static files hash versions with [gulp-revm \u0026 gulp-revm-collector]:\u003c/div\u003e\n    \u003cdiv class=\"subTitle\"\u003eAlso works for javascript,css,images and so on...\u003c/div\u003e\n    \u003cimages class=\"img\"  src=\"../assets/images/demo.jpg?v=31b2c3b2c1\"\u003e\u003c/images\u003e\n\u003c/body\u003e\n\u003cscript src=\"../assets/images/js/jquery-1.10.2.min.js?v=25db94fef9\"\u003e\u003c/script\u003e\n\u003cscript src=\"../assets/images/js/testJs_1.js?v=d4c14c7af6\"\u003e\u003c/script\u003e\n\u003cscript src=\"../assets/images/js/testJs_2.js?v=2ae0f37aea\"\u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n\n## More Tips（更多）\n\n\u003e Relatived gulp plugin：相关插件\n- [gulp-revm](https://github.com/WeideMo/gulp-revm) - Static asset revisioning by appending content hash to filenames: index.css =\u003e index.css?d41d8cd98f.\n- [gulp-revm-collector](https://github.com/WeideMo/gulp-revm-collector) - Static asset revision data collector from manifests, generated from different streams, and replace their links in html template.\n- [gulp-css-spriterm](https://github.com/WeideMo/gulp-css-spriterm) - Gulp-css-spriterm is based on the revised version of gulp-css-spriter, mainly to do clear cache processing for naming Sprite map.\n\n\u003e Works for multi types source file:支持多种源文件类型\n\nBy looking at demo, you can see that you can get hash values for different files by listening to different types of files, including JS scripts, CSS styles and picture files, and so on, as well as other files.\n\n通过查看demo可以知道，通过监听不同类型的文件可以获取不同文件的hash值，包括了js脚本，css样式和图片文件等，其他文件同理可以\n\n\u003e Works for multi types target page-file:支持多种源文件类型\n\nGulp-revfile can write hash versions to different types of web pages, such as HTML, shtml, PHP, JSP, and so on\n\ngulp-revfile可以将hash版本写入不同类型的网页文件，如html,shtml，php，jsp等\n\n\u003eAutomatic generation: 编辑自动生成\n\nAfter startup watch Task, the file version number will be automatically completed when the file is modified.\n\n启动监控后，文件版本号会在修改文件的时候自动完成\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweidemo%2Fgulp-revfile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweidemo%2Fgulp-revfile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweidemo%2Fgulp-revfile/lists"}