how to implement the version control of static files

https://github.com/sindresorhus/gulp-rev/blob/master/integration.md 如何通过后端服务(php)做静态资源的版本化,当然也有直接通过前端构建工具静态资源版本化,
下面是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));
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值