问题描述:
修改gulp-rev-append插件实现自动修改文件中静态资源链接添加md5版本号。但是前天有一点点很遗憾,对CSS中background:url()的匹配还存在一点点不足,url()必须带单引号或者双引号才能被正确匹配的到,但是CSS的标准写法中,通常不会带单引号或者双引号。
===============================================================================
解决方案:
修改第9行:var FILE_DECL = /(?:href=|src=|url\()['|"]([^\s>"']+?)\?v=([^\s>"']+?)['|"]/gi;
改成:
var FILE_DECL = /(?:href=|src=|url\()(?:['|"]?)([^\s>']+?)\?v=(@@hash).+(?:['|"|>]?)/gi;
具体完整代码:
var fs = require('fs');
var path = require('path');
var crypto = require('crypto');
var Buffer = require('buffer').Buffer;
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
var map = require('event-stream').map;
// var FILE_DECL = /(?:href=|src=|url\()['|"]([^\s>"']+?)\?v=([^\s>"']+?)['|"]/gi;
var FILE_DECL = /(?:href=|src=|url\()(?:['|"]?)([^\s>']+?)\?v=(@@hash).+(?:['|"|>]?)/gi;
var revPlugin = function revPlugin() {
return map(function(file, cb) {
var contents;
var lines;
var i, length;
var line;
var groups;
var dependencyPath;
var data, hash;
if(!file) {
throw new PluginError('gulp-rev-append', 'Missing file option for gulp-rev-append.');
}
if(!file.contents) {
throw new PluginError('gulp-rev-append', 'Missing file.contents required for modifying files using gulp-rev-append.');
}
contents = file.contents.toString();
lines = contents.split('\n');
length = lines.length;
for(i = 0; i < length; i++) {
line = lines[i];
groups = FILE_DECL.exec(line);
if(groups && groups.length > 1) {
var normPath = path.normalize(groups[1]);
if (normPath.indexOf(path.sep) === 0) {
dependencyPath = path.join(file.base, normPath);
}
else {
dependencyPath = path.resolve(path.dirname(file.path), normPath);
}
try {
data = fs.readFileSync(dependencyPath);
hash = crypto.createHash('md5');
hash.update(data.toString(), 'utf8');
line = line.replace(groups[2], hash.digest('hex'));
}
catch(e) {
// fail silently.
}
}
lines[i] = line;
FILE_DECL.lastIndex = 0;
}
file.contents = new Buffer(lines.join('\n'));
cb(null, file);
});
};
module.exports = revPlugin;