shonny-ua / gulp-rev-collector Goto Github PK
View Code? Open in Web Editor NEWStatic asset revision data collector from manifests, with was generated from different streams and replace they's links in html template.
License: MIT License
Static asset revision data collector from manifests, with was generated from different streams and replace they's links in html template.
License: MIT License
Greetings,
I just jumped from grunt to gulp because it seems to be much faster.
Unfortunately I found this bug in gulp-rev-collector:
{ regexp: /resources\/js\/assets\.js/g, replacement: 'resources/js/assets-6889ae5e.js' }
{ regexp: /resources\/js\\assets-[0-9a-f]{8}-?\.js/g, replacement: 'resources/js/assets-6889ae5e.js' }
As you can see the generated regexp-replacement objects do not work the 2nd time (js/assets vs js\assets)
help me! thinks
I use gulp-rev-collector religiously on a lot of projects. I have one where I have on a very limited CI build infrastructure on an old Node version (v0.10.x). The build recently started failing because gul-rev-collector has a very liberal dependency on through2:
"through2": ">=0.5.1",
About 3 weeks ago https://www.npmjs.com/package/through2 updated with a much newer Node dependency, which is causing my builds to break:
Note: Users of Node.js 0.10 and 0.12 should install [email protected]. As of [email protected], readable-stream@3 is being used and is not compatible with older versions of Node.js. v2.x support is being maintained on the v2.x branch.
Is there any chance you could publish a new version of gul-rev-collector locked to v2 of through2 for us poor souls stuck on older Node versions that we're not in control of changing?
Thank you!
the bellow we would see is part of the index.js codes of gulp-rev-collector
var cleanReplacement = path.basename(json[key]).replace(new RegExp(opts.revSuffix), '');
if (!~[
path.basename(key),
_mapExtnames(path.basename(key), opts)
].indexOf(cleanReplacement)) {
isRev = 0;
}
when my source file path look like none-d56725a517-d56725a517.png , the result path of the replacement via var cleanReplacement = path.basename(json[key]).replace(new RegExp(opts.revSuffix), '');
will be the string like noned56725a517.png, the right way of this result should be none-d56725a517.png . for the issue the revcollect cannot work as we expected
my rev-manifest.json file content like
{ "js/act_create_task_add": "js/act_create_task_add-d5b3871a7a", "js/act_create_task_icon_list": "js/act_create_task_icon_list-0214817f5d", "js/act_create_task_list": "js/act_create_task_list-43930d8cf8", "js/act_history_list": "js/act_history_list-d7d8e12548", {
my html file content
<script src="../../../js/require.js" data-main="js/act_create_task_add"></script>gulp.js
gulp.task('revFile',function(){ return gulp.src(['target/portalUI/*.json','src/**/page/**/*.html']) .pipe(revCollector({replaceReved: true,dirReplacements:{}})) .pipe(gulp.dest('target/portalUI')); })
after run this task , html file content not changed. why ?
thanks !
I'm using TS with import, for example in app.module.ts I have:
import {CheckedDirective} from "./common/directives/checked.directive";
checked.directive is a TS in that directory.
With gulp-rev, after tsc, it is correctly revisioned as: checked-0a90e14b3d.directive.js
and inserted in manifest
"app/common/directives/checked.directive.js": "app/common/directives/checked-0a90e14b3d.directive.js",
gulp-rev-collector doesn't rewrite the dependency in "app/app-c3170cc5cd.module.js", it remains:
var checked_directive_1 = require("./common/directives/checked.directive");
What can I do?
My gulp tasks:
`gulp.task('revision:rename', () =>
gulp.src([
BUILD_DIR+"//*.html",
BUILD_DIR+"//.css",
BUILD_DIR+"/**/.js",
"!"+BUILD_DIR+"/index.html",
"!"+BUILD_DIR+"/favicon.ico",
BUILD_DIR+"/**/*.{jpg,png,jpeg,gif,svg,ico,PNG}"])
.pipe(rev())
.pipe(gulp.dest(DIST_ASSEMBLE))
.pipe(rev.manifest({ path: 'manifest.json' }))
.pipe(gulp.dest(DIST_ASSEMBLE))
);
//update references in js but not rewrite
//import {CheckedDirective} from "./common/directives/checked.directive";
//in import {CheckedDirective} from "./common/directives/checked-0a90e14b3d.directive";
gulp.task("revision:updateReferences", () =>
gulp.src([DIST_ASSEMBLE+"/manifest.json","distassemble/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest(DIST_ASSEMBLE))
);`
I want to change:
.demo{
background: url("../img/demo.jpg");
}
to like:
.demo{
background: url("../img/demo-0317f424c0.jpg");
}
how can I do this?
Is it possible to use this plugin with generic manifest files? It seems that the plugin only works with manifest files that have revved assets generated from gulp-rev. But if I have a webpack asset manifest, or just a generic asset manifest created with another tool, the manifest file does not work with gulp-rev-collector.
Extracting gulp-rev-collector-1.0.0.tgz
shows the following files:
README.md
index.js
package.json
Extracting gulp-rev-collector-1.0.1.tgz
has:
.npmignore
README.md
package.json
Note the missing index.json
All my pages are .jsp format, I import static js&css resources like below:
<link rel="stylesheet" type="text/css" href="${url_resources}/css/commQuery/commQuery.css">
<script type="text/javascript" src="${url_resources}/js/jquery.min.js"></script>
When I use gulp-rev && gulp-rev-collector to add md5(version No.) for these resources, it doesn't work since the path include ${url_resources}, is there any way to set this ${url_resources} template variable?
I used some methods to modify the rev_manifest.json after use gulp-rev
and now , my rev_manifest.json looks like this:
{
"assets/less/common.less": "assets/css/common-2c0d21e40c.css"
}
It means that they have different ext : less & css
and I found that was cause by the index.js on line 31
if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
could u delete the second condition for this issue? or there may cause more issues?
gulp-util is present in package.json but not currently used.
有两个字体文件分别为 woff 和woff2
json里面的key应该按照 当前key对应的文件名的长度来排序下~否则woff2 被woff对应的key替换掉
var vfs = require('vinyl-fs');
const revCollector = require('gulp-rev-collector');
vfs.src([
'./src/**/js/*.js',
'./src/**/*.html',
'./src/**/media/*' // mp3 files in media
])
.pipe(revCollector()) // revCollector will break mp3
.pipe(vfs.dest('./dist'));
<!--
<script src ="/js/com/a.js"></script>
<script src ="/js/com/b.js"></script>
<script src ="/js/com/c.js"></script>
...
-->
<!-- optimize -->
<script src ="/concat_prefix/com/a.js,/com/b.js,/com/c.js"></script>
<!-- '/concat_prefix' map '/js', multi src split by char ','-->
Example:
In this case, the concat_prefix is '/js/??', it map to '/js'
origin: /js/??/com/a.js,/com/b.js,/com/c.js
after: /js/??/com/a-[revcode].js,/com/b-[revcode].js,/com/c-[revcode].js
gulp.task('afterRev', () => {
return gulp.src([
'./demo/input/*.json',
'./demo/input/**/*.html'
])
.pipe(revCollector({
concatPrefixes: {
'/js/??': '/js',
'/css/??': '/css'
}
}))
.pipe(gulp.dest('./demo/output'));
});
You can see PR43 😃
more about concat static asserts : nginx-http-concat
Sorry for my english.
This is my test script (i'm test newbie also...)
'use strict';
var assert = require('assert');
var gutil = require('gulp-util');
var rev_collector = require('./index');
var path = require('path');
var html = '<!DOCTYPE html><html><head><title>RevCollectorTest<title><head><body><script src="/js/script1.js"></script><script src="/js/dir/script1.js"></script></body></html>';
var manifest = '{"js/script1.js":"js/script1-61e0be79.js","js/dir/script1.js":"js/dir/script1-a42f5380.js"}';
it('should replace links in .html file wo params', function (cb) {
var count = 0;
var stream = rev_collector();
stream.write(new gutil.File({
path: 'rev/js/rev-manifest.json',
contents: new Buffer(manifest)
}));
stream.write(new gutil.File({
path: 'index.html',
contents: new Buffer(html)
}));
stream.on('data', function (file) {
var contents = file.contents.toString('utf8');
assert.equal(ext, '.html', 'Only html files should pass through the stream');
assert(/\/js\/script1-61e0be79\.js/.test(contents), 'The /js/script1.js should be correct replaced');
assert(!/js\/script1\.js/.test(contents), 'The /js/script1.js should be replaced');
assert(/\/js\/dir\/script1-a42f5380\.js/.test(contents), 'The /js/dir/script1.js sho be correct replaced');
assert(!/js\/dir\/script1\.js/.test(contents), 'The /js/dir/script1.js should be replaced');
count++;
});
stream.on('end', function() {
assert.equal(count, 1, 'Only one file should pass through the stream');
cb();
});
stream.end();
});
Now, I have a demand in my js files. I need to change the img dynamically according to the "status". So the code is "$(element).attr('src', 'img-btn' + status + '.png');". The status is a variable and is varying. In this case, the replacement can't work properly, because can't the img src.
I had an issue because how handling manifests was used; it checks to see if basename are the same which they are not for me because I rename the file using gulp-rename as part of reving (adding -rev to the end of all files).
An alternative solution I found to all of this is the following (using gulp-clone + gulp-filter)
# outside of tasks (shared vars)
assets_sink = clone.sink()
# assets task
gulp.src("static/**/*.css", { base: __dirname })
.pipe rev()
.pipe $.rename({ "suffix": "-rev" })
.pipe assets_sink # basically copy the current stream
.pipe revReplace()
.pipe gulp.dest("/static")
.pipe rev.manifest()
.pipe gulp.dest("/static")
# in another task that depends on the task above
gulp.src("templates/**/*.html")
.pipe assets_sink.tap() # inject the assets into this stream
.pipe revReplace() # replace the references
.pipe $.filter("**/*.html")
# do whatever else you want to do to the templates --------
.pipe gulp.dest("templates")
.pipe $.htmlmin
(brackets removed for readability)
I am not sure if this is a better solution; just know that it works more consistently...
I have not tried pre-pending a URL for instance for CDN hosted stuff which might make the path replacement still a necessary thing that might make sense elsewhere.
Another advantage of gulp-rev-collector is the manifest could be pre-existing (not have to be generated during the same gulp run; resulting in more incremental builds).
Ideas? Suggestions? maybe there is an even better way to do this? build part of this into gulp-rev
itself?
rev-manifest.json
{
"assets/images/avatar.png": "assets/images/avatar-616d026e5f.png"
}
gulpfile.js
...
gulp.task('rev-img', ['imagemin'], function () {
return gulp.src(['rev-manifest.json', 'dist/server/views/index.jade'])
.pipe($.revCollector({
replaceReved: true,
dirReplacements: {
'assets/images/': 'http://my.cdn.net/'
}
}))
.pipe(gulp.dest('dist/server/views'));
});
dist/server/views/index.jade
p
img.img-responsive(src="/assets/images/avatar.png")
it doesn't get replaced.
desired output:
p
img.img-responsive(src="http://my.cdn.net/avatar-616d026e5f.png")
i am not sure i am using dirReplacements
correctly.
what i don't see clear is why you are concatenating the replacement string with the pattern at line 93 https://github.com/shonny-ua/gulp-rev-collector/blob/master/index.js#L93
that makes the regexp
to be /assets\/images\/assets\/images\/avatar\.png/g
I have two file ,the path is "/app/test0.js" and "/app/test/test0.js" ,fileanme is identical。but path is not identical。
gulp.task('testmd5',function() { gulp.src(['src/app/**/*.js']) .pipe(rev()) .pipe(gulp.dest('dist/js')) // write rev'd assets to build dir .pipe(rev.manifest()) .pipe(gulp.dest('./rev')) }); gulp.task('rev', function() { gulp.src(['./rev/*.json', './src/app/**/*.html']) .pipe(revCollector({ replaceReved: true })) .pipe(gulp.dest('./dist/app/')); });
run after all the html replace olny one js file。
I'm a little bit stumped by the fact that when I run my default gulp task, the collector will read the rev manifest and properly collect and alter my css. But, when I change a scss file, the watcher dispatches a similar series of tasks, yet the collector doesn't rev the filenames in the css? Am I missing something?
Here's my tasks:
gulp.task('default', function(callback){
runSequence(
'clean',
['watchify', 'sass'],
'revImages',
'revScripts',
'revCollector',
'watch',
'tidyUp',
'nodemon:development',
callback);
});
gulp.task('revCollector', function () {
return gulp.src(['public/**/*.json', 'public/**/*.css' ])
.pipe( revCollector ({
replaceReved: true
}))
.pipe(gulp.dest('public'));
});
gulp.task('watch', function() {
watch(config.sass.srcWatch, batch(function(){
gulp.start('cssUpdate');;
}));
});
gulp.task('cssUpdate', function(callback){
runSequence(
'clean:css',
'sass',
'revImages',
'revScripts',
'revCollector',
callback);
});
After a scss change, the watch task successfully starts the cssUpdate and all looks normal, but the css is unchanged by rev collector.
Manifest looks like this each time:
{
"about-us.jpg": "about-us-5db8b9d7.jpg",
"star.png": "star-88c9acc5.png",
"verified.png": "verified-bc34ee02.png"
}
Any ideas?
when I use dirReplacements option, it does not work.
Static asset revision data collector from manifests, with was generated from different streams and replace they's links in html template.
should read at very least:
Static asset revision data collector from manifests, generated from different streams, and replace their links in html template.
I would love to help make the description better, what is it trying to say?
In gulp-rev 4.0 the new default hash length is now 10 so the default revSuffix
value no longer picks up the manifest hash.
Setting the revSuffix config correctly to allow for 10 character makes it work again:
revSuffix: '-[0-9a-f]{10}-?'
Not an issue with Rev Collector as such, but added here for the record.
If the name of the JS file contains “-”, it will be not work
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
cleanCSS = require('gulp-clean-css'),
revCollector = require('gulp-rev-collector'),
rev = require('gulp-rev'),
minifyHTML = require('gulp-minify-html'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin'),
clean = require('gulp-clean'),
replace = require('gulp-replace'),
gulpSequence = require('gulp-sequence');
gulp.task('script',function(){
gulp.src('./dev/scripts/**/*.js')
.pipe(replace(/dev\/templates/g, '/publish/build'))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('build/scripts'))
.pipe(rev.manifest())
.pipe(gulp.dest( 'rev/scripts' ));
})
gulp.task('copy', function() {
return gulp.src('./dev/fonts/**/*')
.pipe(gulp.dest('build/fonts'))
});
gulp.task('cleanCSS',function(){
return gulp.src(['./dev/styles/.css','./dev/fonts/.css'])
.pipe(rev())
.pipe(cleanCSS({
compatibility:'ie9',
}))
.pipe(autoprefixer({
browsers: ['> 5%'],
cascade: false
}))
.pipe(gulp.dest('build/styles'))
.pipe( rev.manifest())
.pipe( gulp.dest( 'rev/styles' ));
})
//gulp.task('rev',['cleanCSS','script'],function(){
gulp.task('rev',function(){
return gulp.src(['rev/**/.json','dev/templates/.html','./index.html'])//
.pipe(revCollector({
replaceReved: true,
dirReplacements:{
'dev/scripts/':'./scripts/',
'dev/styles':'./styles',
'dev/fonts':'./styles',
}
}))
.pipe(replace(/dev/images//g, 'images/'))
.pipe( minifyHTML({
empty:true,
spare:true
}))
.pipe(gulp.dest('./build'))
})
gulp.task('clean', function () {
return gulp.src(['./build','./rev'], {read: false})
.pipe(clean());
});
gulp.task('imagemin',function(){
gulp.src('dev/images/**/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})],{
verbose:true
}))
.pipe(gulp.dest('build/images'))
})
//gulp.task('build',['rev','imagemin','copy'])
gulp.task('build',gulpSequence('clean','script','cleanCSS',['imagemin','copy'],'rev'))
this is my gulpfile.js ,sometime it's work well,all path can replace right . but sometime,the css path can be replace,but js path can't be replace . sometime success,sometime fail,that why ?if i run task(expect rev task)first,and then run rev task,it's work well,but i want run task once and everthing is gone;i hope your help,thank!
why not support node v6.2.1
I user ‘gulp-filter ’
gulp.task('css', function() {
let plugins = [
autoprefixer(postcssConfig.autoprefixer)
],
filterCss = filter('**/*.css', {restore: true});
gulp
.src([
'rev/{css,images}/*.json',
'src/**/*.css',
'!src/**/_*.css'
])
.pipe(filterCss)
.pipe(postcss(plugins))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(rev())
.pipe(sourcemaps.write('./'))
.pipe(filterCss.restore)
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
Images is OK,
.logo {
width: 388px;
height: 120px;
background: #fff url(images/logo.png) 0 0 no-repeat;
}
////﹀﹀﹀﹀﹀﹀
.logo {
width: 388px;
height: 120px;
background: #fff url(images/logo-4761c15022.png) 0 0 no-repeat;
}
But @font-face not work
@font-face {font-family: "iconfont";
src: url('fonts/iconfont.eot?t=1505980166163'); /* IE9*/
src: url('fonts/iconfont.eot?t=1505980166163#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/iconfont.ttf?t=1505980166163') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('fonts/iconfont.svg?t=1505980166163#iconfont') format('svg'); /* iOS 4.1- */
}
rev-collector fails when I use two constants to build an image path to 'testdefault.png'
(testdefault-XXXXXXX.png is NOT created):
`URLS = {
IMAGE_PREFIX:"",
IMAGE_BASE_LOCAL_CAST_BANNERS:"img/banners"}
DEFAULT_IMAGE = {
TEST:
{TESTDEFAULT:cf.URLS.IMAGE_PREFIX + URLS.IMAGE_BASE_LOCAL_CAST_BANNERS+ "/testdefault.png"
}
`
However, once I remove the second constant and define the path a little more explicitly, rev-collect works (testdefault-XXXXXXX.png is created):
DEFAULT_IMAGE = {
TEST:
{
TESTDEFAULT:cf.URLS.IMAGE_PREFIX + "img/banners/testdefault.png"
}
`
manifest is correct:
"img/banners/testdefault.png": "img/banners/testdefault-13626465c2.png"
Please advise.
Many Thanks!
I use gulp-rev to generate the css file with hashcode and generate the rev-manifest,but when I use gulp-rev-collector the replace the css in my html file.It just generate the html in my target dir but the generated html keep its before name in head tag.So I did not replace my static resource. Here is my code And some thing about it:
var gulp = require("gulp");
var concat = require("gulp-concat");
var minifyCss = require("gulp-minify-css");
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var path = [
'app/css/quotedPrice.css',
'app/css/style.css',
'app/css/strategy.css',
'app/css/subject.css'
]
gulp.task('concat',function() {
gulp.src(path)
.pipe(concat('wap.min.css'))
.pipe(minifyCss())
.pipe(rev())
.pipe(gulp.dest('app/build/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('app/rev'));
});
gulp.task('rev',['concat'],function () {
gulp.src(['app/rev/*.json','app/discount.html'])
.pipe(revCollector({
replaceReved:true,
dirReplacements:{
'css':"app/build/css"
}
}))
.pipe(gulp.dest('app/build'));
});
gulp.task('default', ['concat', 'rev']);
Possibly related to #30
This condition will fail to recognize a rev-manifest.json
such as following:
{
"js/app.js": "js/app-aaaaaaaaaa.js",
"maps/js/app.js.map": "maps/js/app-aaaaaaaaaa.js.map"
}
The reason is the last conditional, which will compare app.js.map
and app.js
(path.basename('app-aaaaaaaaaa.js.map')
is 'app-aaaaaaaaaa.js'
Writing a test as I'm reporting this.
Well, there is another situation which is the content between the brackets in css url is not always have quotes, like background: url(/img/static.jpg)
, and this is legal, but when this situation, the replace part when you are using the manifest, it won't work.
who help me? thanks
References in HTML are not modified when relative paths are used
replace fail
Hi
I have a ‘replace twice’ issue about gulp-rev-collector
When I execute the build, the keys to replace will be create in rev-manifest.json
The keys is below:
"22.png": "22-b0af3e9bd6.png",
"active/04/0402.png": "active/04/0402-88b7b2fb22.png",
After that, use the keys to replace, and the issue will be happened.
22.png is OK.
Problem is 0402.png.
I think the file name ‘0402.png’ will be replaced to ‘0402-88b7b2fb22.png’ at first time.
Then, ‘0402-88b7b2fb22.png’ will be replaced to ‘0402-88b7b2fb22-b0af3e9bd6.png’ at twice.
It make the picture with wrong file name can not display on the web page.
Please fix the issue.
Best Regards!
when I run build, the gulp-rev-collector execute does not success
Here is my gulpfile.js
var rev = require('gulp-rev')
var revCollector = require('gulp-rev-collector')
var rename = require('gulp-rename');
gulp.task('sass', done => {
gulp.src('./src/css/*.scss')
.pipe(sass())
.pipe(rename({ suffix: '-min' }))
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'))
done()
});
gulp.task('scripts', done => {
gulp.src('src/js/*.js')
.pipe(rev())
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
done()
});
gulp.task('revCollector', done => {
gulp.src(['rev/**/*.json', 'src/*.html'])
.pipe(revCollector({
replaceReved: true,
dirReplacements: {
'css': '/dist/css/',
'js': '/dist/js'
}}))
.pipe(gulp.dest('dist'))
done()
})
gulp.task('build', gulp.series( 'sass', 'scripts', 'revCollector'))
And the html file is under the src folder, which looks like this:
<head>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/index.css">
</head>
... ....
... ...
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="js/dayjs.min.js" type="text/javascript"></script>
<script src="js/index.js"></script>
... ...
</body>
</html>
And the css rev-manifest.json is :
{
"index-min.css": "index-min-a938f1db0e.css"
}
the js rev-manifest.json is :
{
"dayjs.min.js": "dayjs-45b1d5a09b.min.js",
"index.js": "index-28e73254bf.js",
"jquery-3.5.1.min.js": "jquery-3.5-dc5e7f18c8.1.min.js"
}
Finally, the dist html file does not replace path correctly.
What's the problem ?
HI, I'm using gulp-rev-collector
and found it not working. I write a demo to reappear what I meat. Here is my gulpfile.js:
'use strict'
let gulp = require('gulp');
let rev = require('gulp-rev');
let revController = require('gulp-rev-collector');
let minifyHTML = require('gulp-minify-html');
let DIST = './dist';
gulp.task('default', ['css', 'js', 'index']);
gulp.task('css', () => {
gulp.src('./src/**.css')
.pipe(rev())
.pipe(gulp.dest(DIST))
.pipe(rev.manifest('css-map.json', {
merge: true
}))
.pipe(gulp.dest(DIST));
});
gulp.task('js', () => {
gulp.src('./src/**.js')
.pipe(rev())
.pipe(gulp.dest(DIST))
.pipe(rev.manifest('js-map.json', {
merge: true
}))
.pipe(gulp.dest(DIST));
});
gulp.task('index', () => {
gulp.src([DIST + '/**.json', './src/index.html'])
.pipe(revController())
.pipe(minifyHTML({
empty: true,
spare: true
}))
.pipe(gulp.dest(DIST));
});
I found if I directly run gulp
, link
and script
tag in index.html did not be replaced by url
with md5
, but if I run gulp index
, it works. So I guess, maybe when collector
runs the manifest file
generate by gulp-rev
has not created.
It seems the timestamp is not updated for files when the content is updated. Is this functionality outside the scope of gulp-rev-collector
? Do I need to pipe another plugin to ensure this happens?
The reason why this is desirable is to ensure the timestamp is updated if the content of the file is updated (e.g. *.html). NGINX computes the etag hash for static assets which is based on last modified timestamp and the length of the file. Unless the file timestamp itself is updated, the etag will remain the same even though the hash for included bundles have been modified (because length is still the same).
On the other hand, to ensure that unmodified assets remain cached it is desirable to retain the timestamp of files that are not modified.
const revCollector = require('gulp-rev-collector');
[...]
return gulp.src(['./temp/bundles/manifest.json', 'dist/app/**/*.html'], { base: "./" })
.pipe(revCollector())
.pipe(gulp.dest('.'));
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.