在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):smysnk/gulp-rev-all开源软件地址(OpenSource Url):https://github.com/smysnk/gulp-rev-all开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):gulp-rev-all
PurposeBy using the HTTP server response header Additionally, content distribution networks like CloudFront let you cache static assets in Edge Locations for extended periods of time. Why fork?This project was forked from gulp-rev to add reference processing and rewriting functionality.
It is the philosophy of Consider the following example:A css file makes reference to an image. If the image changes, the hash of the css file remains the same since its contents have not changed. Web clients that have previously cached this css file will not correctly resolve the new image. If we take in to consideration the dependency graph while calculating the css file hash, we can have it change if any of its child references have changed. So to recap, InstallInstall with npm
Or yarn:
Usagevar gulp = require("gulp");
var RevAll = require("gulp-rev-all");
gulp.task("default", function () {
gulp.src("dist/**").pipe(RevAll.revision()).pipe(gulp.dest("cdn"));
}); var gulp = require("gulp");
var RevAll = require("gulp-rev-all");
var awspublish = require("gulp-awspublish");
var cloudfront = require("gulp-cloudfront");
var aws = {
params: {
Bucket: "bucket-name",
},
accessKeyId: "AKIAI3Z7CUAFHG53DMJA",
secretAccessKey: "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",
distributionId: "E1SYAKGEMSK3OD",
region: "us-standard",
};
var publisher = awspublish.create(aws);
var headers = { "Cache-Control": "max-age=315360000, no-transform, public" };
gulp.task("default", function () {
gulp
.src("dist/**")
.pipe(RevAll.revision())
.pipe(awspublish.gzip())
.pipe(publisher.publish(headers))
.pipe(publisher.cache())
.pipe(awspublish.reporter())
.pipe(cloudfront(aws));
}); Methods.revision({ options })Returns a transform function that can be used to pipe files through so that they may be revisioned, also corrects refererences to said files. .manifestFile()Returns a transform function that will filter out any existing files going through the pipe and will emit a new manifest file. Must be called after var gulp = require("gulp");
var RevAll = require("gulp-rev-all");
gulp.task("default", function () {
return gulp
.src(["assets/**"])
.pipe(gulp.dest("build/assets"))
.pipe(RevAll.revision())
.pipe(gulp.dest("build/assets"))
.pipe(RevAll.manifestFile())
.pipe(gulp.dest("build/assets"));
}); An asset manifest, mapping the original paths to the revisioned paths, will be written to {
"css/unicorn.css": "css/unicorn.098f6bcd.css",
"js/unicorn.js": "js/unicorn.273c2cin.js"
} .versionFile()Returns a transform function that will filter out any existing files going through the pipe and will emit a new version file. Must be called after var gulp = require("gulp");
var RevAll = require("gulp-rev-all");
gulp.task("default", function () {
return gulp
.src(["assets/**"])
.pipe(gulp.dest("build/assets"))
.pipe(RevAll.revision())
.pipe(gulp.dest("build/assets"))
.pipe(RevAll.versionFile())
.pipe(gulp.dest("build/assets"));
}); The version file will contain the build date and a combined hash of all the revisioned files, will be written to {
"hash": "c969a1154f2a5c0689d8ec4b0eafd584",
"timestamp": "2014-10-11T12:13:48.466Z"
} Optionsgulp.src("dist/**").pipe(RevAll.revision({ options })); fileNameVersionType: fileNameManifestSet the filename of the file created by revAll.manifestFile() includeFilesInManifestAdd only specific file types to the manifest file dontGlobalDon't rename, search or update refrences in files matching these rules dontRenameFileDon't rename files matching these rules dontUpdateReferenceDon't update references matching these rules dontSearchFileDon't search for references in files matching these rules In some cases, you may not want to rev your gulp.task("default", function () {
gulp
.src("dist/**")
.pipe(RevAll.revision({ dontRenameFile: [/^\/favicon.ico$/g, ".html"] }))
.pipe(gulp.dest("cdn"));
}); Every html file except the root gulp.task('default', function () {
gulp
.src('dist/**')
.pipe(RevAll.revision({ dontRenameFile: [/^\/favicon.ico$/g, /^\/index.html/g] })))
.pipe(gulp.dest('cdn'))
}); hashLengthChange the length of the hash appended to the end of each revisioned file (use gulp.task("default", function () {
gulp
.src("dist/**")
.pipe(RevAll.revision({ hashLength: 4 }))
.pipe(gulp.dest("cdn"));
}); prefixPrefixes absolute references with a string (use gulp.task("default", function () {
gulp
.src("dist/**")
.pipe(RevAll.revision({ prefix: "http://1234.cloudfront.net/" }))
.pipe(gulp.dest("cdn"));
}); transformPathSpecify a function to transform the reference path. Useful in instances where the local file structure does not reflect what the remote file structure will be. The function takes three arguments:
gulp.task("default", function () {
gulp
.src("dist/**")
.pipe(
RevAll.revision({
transformPath: function (rev, source, path) {
// on the remote server, image files are served from `/images`
return rev.replace("/img", "/images");
},
})
)
.pipe(gulp.dest("cdn"));
}); transformFilenameIf the default naming convention does not suite your needs, you can specify a custom filename transform. The function takes one argument:
gulp.task("default", function () {
gulp
.src("dist/**")
.pipe(
RevAll.revision({
transformFilename: function (file, hash) {
var ext = path.extname(file.path);
return hash.substr(0, 5) + "." + path.basename(file.path, ext) + ext; // 3410c.filename.ext
},
})
)
.pipe(gulp.dest("cdn"));
}); debugIf you set this options to true, verbose logging will be emitted to console. Annotater & ReplacerIn some cases, false-positives may occur. Strings that are similar to a file reference may be incorrectly replaced. In the example below, the 2nd instance of 'xyz' is not reference to the file xyz.js: require('xyz');
angular.controller('myController', ['xyz', function(xyz) {
...
}]); It will still however be replaced resulting in file corruption: require('xyz.123');
angular.controller('myController', ['xyz.123', function(xyz) {
...
}]); This behaviour can be avoided by passing custom AnnotatorThe annotator function is called with the original file content and path.
Annotator function should return a list of objects that contain fragments of the file content in order.
You may split the file up into as many fragments as necessary and attach any other metadata to the fragments.
The file will be reassembled in order. The default annotator returns one fragment with no annotations: options.annotator = function (contents, path) {
var fragments = [{ contents: contents }];
return fragments;
}; ReplacerThe replacer function's job is to replace references to revisioned files. The paremeters are as follows:
The default replacer function is as follows: options.replacer = function (
fragment,
replaceRegExp,
newReference,
referencedFile
) {
fragment.contents = fragment.contents.replace(
replaceRegExp,
"$1" + newReference + "$3$4"
);
}; You can overide the default annotator and replacer to change the behaviour of gulp-rev-all and deal with problematic edge cases. Additional Propertiesfile.revPathOriginalThe original full path of the file, before revisioning. file.revFilenameOriginalThe original filename less the file extension, before revisioning. file.revFilenameExtOriginalThe original file extension, before revisioning. file.revHashOriginalThe original hash of the asset before any calculations by file.revHashThe hash of the asset as calculated by |