how to implement the version control of static files
2017-02-09 12:49
351 查看
https://github.com/sindresorhus/gulp-rev/blob/master/integration.md 如何通过后端服务(php)做静态资源的版本化,当然也有直接通过前端构建工具静态资源版本化,
下面是angular项目,使用gulp直接实现静态资源版本化。
下面是angular项目,使用gulp直接实现静态资源版本化。
/** * build 时的 js 压缩, 文件 hash 地址替换 */ var gulp = require('gulp'); var config = require('../config').inject; var handleErrors = require('../util/handleErrors'); /** * 根据文件内容生成Hash名称,映射表写入 dest/rev-manifest.json 文件中。 */ gulp.task("revision", function() { var gulpif = require('gulp-if'); var rev = require('gulp-rev'); var uglify = require('gulp-uglify'); return gulp.src([config.src + "/**/*.css", config.src + "/**/*.js"]) .pipe(rev()) .pipe(gulpif(/.*?vendor[-\d\w]*\.js$/, uglify())) .pipe(gulp.dest(config.dest)) .pipe(rev.manifest()) .on('error', handleErrors) .pipe(gulp.dest(config.dest)); }); /** * 根据 revision 任务生成的映射表,html中引用的资源文件名称进行替换 */ gulp.task("inject", ["revision"], function(){ var manifest = gulp.src(config.dest + "/rev-manifest.json"); var replacePath = require('gulp-replace-path'); var revReplace = require('gulp-rev-replace'); var path = require('path'); // 处理html中的相对路径为相对config.src的绝对路径 var replacement = function (match, __absolutePath__) { return function (match, srcStr, originPath) { if (originPath.charAt(0) === '/' || /^http/i.test(originPath)) { // absolute path return match; } else { var relative = path.relative(process.cwd() + '/' + config.src, path.dirname(__absolutePath__)); return (srcStr + "/" + path.join(relative, originPath)).replace(/\\/g, '/'); // fix windows下sep } }; }; return gulp.src(config.htmlSrc, {base: config.src}) .pipe(replacePath(/(<script[^>]*?src=['"])([^'"]*)/g, replacement)) // 替换script src .pipe(replacePath(/(<link[^>]*?href=['"])([^'"]*)/g, replacement)) // 替换 link中的 href .pipe(revReplace({manifest: manifest, canonicalUris: false})) .pipe(gulp.dest(config.htmlDest)); });
相关文章推荐
- How to change the property of a control from a flowlayoutpanel?
- How to get IOleSite interface of the WebBrowser in an ActiveX control
- OA Framework - How to Find the Correct Version of JDeveloper to Use with E-Business Suite 11i or Release 12.x (Doc ID 416708.1)
- [未完待续]对安装CCMake的一点理解(how to install the latest version of ccmake)
- How to collect the full path name of the files in ASM diskgroups (文档 ID 888943.1)
- [笔记] How to get the versionCode and versionName of your app
- 1. How to review the version of Linux
- How to collect the full path name of the files in ASM diskgroups (文档 ID 888943.1)
- How to find child controls that are located in the template of a parent control
- How to customize the context menus of a WebBrowser control via the IDocHostUIHandler interface.
- How to handle the MouseLeftButtonDown and MouseLeftButtonUp events of the Button control?
- [BTS] How to check the version of BizTalk
- How to Control the [Add document] button on the bottom of every view?
- How To Change the Background Color of a Tab Control
- How to get the DOM of a WebBrowser control from a window handle (VB6)
- How To Call Run() Method of the Microsoft Script Control in C++
- How to find the correct version of JDeveloper to use with eBusiness Suite 11i or Release 12.x
- How To Retrieve the URL of a Web Page from an ActiveX Control
- [Maven]How do I tell Maven to use the latest version of a dependency?
- How to: How to disable Java Security Warning "The application requires an earlier version of Java."