jamesknelson / gulp-rev-replace Goto Github PK
View Code? Open in Web Editor NEWRewrite occurences of filenames which have been renamed by gulp-rev
License: MIT License
Rewrite occurences of filenames which have been renamed by gulp-rev
License: MIT License
I am pretty green when it comes to using Gulp, and I am trying to implement some cache-busting into an application using the gulp-rev-replace plugin along with gulp-rev. I can get the files to be renamed with a hash, and I am able to generate a rev-manifest.json file, but I am stuck with the replacing part.
What is throwing me for a loop specifically is this:
gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");
return gulp.src(opt.srcFolder + "/index.html")
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(opt.distFolder));
});
What is it referring to specifically when you called .pipe(revReplace({manifest: manifest}))????
md5.json
a.js: a-abcdefg.js
This covers the original file
return gulp.src('**/*.php')
.pipe(revReplace({
manifest: manifest,
replaceInExtensions: ['.php', '.jsp']
}))
.pipe(gulp.dest('./')); // This covers the original file
After replacement,
index.php
<script src="a-abcdefg.js"></script>
ok, this is no problem.but i change the md5.json like this:
md5.json
a.js: a-xxxxx.js
After replacement,
index.php
<script src="a-abcdefg.js"></script>
Not replaced, because md5.json has not 'a-abcdefg.js' in the ‘key’。
One way is to retain the original file
return gulp.src('**/*.php')
.pipe(revReplace({
manifest: manifest,
replaceInExtensions: ['.php', '.jsp']
}))
.pipe(gulp.dest('./build')); // retain the original file, output different directory
If I want to cover the original file, Is there a way to solve it or path matching rules under which files?
It used to work with version 2, updated to version 3, updated the task, The task i.e.
gulp.task('minify:dashboard', ['inject:dashboard'], function() {
var assets;
return gulp.src(paths.django.templates.root + '/__dashboard.html')
.pipe($.replace('script src="{{ STATIC_URL }}dashboard', 'script src="compile'))
.pipe($.useref({
searchPath: '.'
}))
// versioning assets
.pipe(indexHtmlFilter)
.pipe($.buffer())
.pipe($.rev())
.pipe($.debug())
.pipe(indexHtmlFilter.restore)
// processing scripts
.pipe(jsFilter)
// .pipe($.uglify({
// preserveComments: $.uglifySaveLicense,
// compress: uglifyCompressOptions
// }))
.pipe($.size())
.pipe(gulp.dest(paths.django.assets.dashboard + '/builds'))
.pipe(jsFilter.restore)
// updating references
.pipe($.revReplace())
// adding django static url reference
.pipe($.replace('src="scripts', 'src="{{ STATIC_URL }}dashboard/builds/scripts'))
.pipe(gulp.dest('compile/builds'));
});
This tasks works fine on its own, e.g.
gulp minify:dashboard
however, when i introduce a new task
gulp.task('minify', ['minify:common', 'minify:dashboard']);
the above task gulp minify
gives me this
events.js:154
throw er; // Unhandled 'error' event
^
Error: write after end
at writeAfterEnd (/magneto/dashboard/node_modules/readable-stream/lib/_stream_writable.js:203:12)
at StreamFilter.Writable.write (/magneto/dashboard/node_modules/readable-stream/lib/_stream_writable.js:239:20)
at write (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at emitNone (events.js:80:13)
at DestroyableTransform.emit (events.js:179:7)
at emitReadable_ (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:448:10)
at emitReadable (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:444:5)
at readableAddChunk (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:187:9)
the strange thing, i remove all the filters, i.e.
gulp.task('minify:dashboard', ['inject:dashboard'], function() {
var assets;
return gulp.src(paths.django.templates.root + '/__dashboard.html')
.pipe($.replace('script src="{{ STATIC_URL }}dashboard', 'script src="compile'))
.pipe($.useref({
searchPath: '.'
}))
// versioning assets
//.pipe(indexHtmlFilter)
.pipe($.rev())
.pipe($.debug())
//.pipe(indexHtmlFilter.restore)
// processing scripts
//.pipe(jsFilter)
// .pipe($.uglify({
// preserveComments: $.uglifySaveLicense,
// compress: uglifyCompressOptions
// }))
//.pipe($.size())
//.pipe(gulp.dest(paths.django.assets.dashboard + '/builds'))
//.pipe(jsFilter.restore)
// updating references
.pipe($.revReplace())
// adding django static url reference
.pipe($.replace('src="scripts', 'src="{{ STATIC_URL }}dashboard/builds/scripts'))
.pipe(gulp.dest('compile/builds'));
});
then the task gulp minify
works perfectly fine. Is it something wrong with gulp-filter package, or am i using it wrong?
Using rev-replace with rev.manifest seems to prevent replacement of the revisioned files.
gulp.task('build', [
'sass',
'inject-loader',
'inject-scripts',
'inject-templates',
'inject-library-scripts',
'inject-library-styles'
], function () {
helpers.log('Build Application');
var masterFile = path.join(config.viewPath, config.master);
var assets = $.useref({
searchPath: ['public']
});
var publicBuildFolder = path.join(config.publicPath, '/build');
var viewBuildFolder = path.join(config.viewPath, '/build');
// Clean out the previous build
helpers.clean([
path.join(publicBuildFolder, '**/*'),
path.join(viewBuildFolder, '**/*')
]);
var filterAssets = $.filter([
'**/app.js',
'**/lib.css',
'!**/master.blade.php'
], {restore: true});
var filterHtml = $.filter([
'**/master.blade.php'
], {restore: true});
// Process and replace with new build
// Process and replace with new build
return gulp.src(masterFile)
.pipe(assets)
.pipe($.plumber())
.pipe(filterAssets)
.pipe($.rev())
.pipe(gulp.dest(config.publicPath))
// .pipe($.rev.manifest())
// .pipe(gulp.dest(publicBuildFolder))
.pipe(filterAssets.restore)
.pipe(args.verbose ? $.print() : $.util.noop())
.pipe($.revReplace({
replaceInExtensions: ['.php']
}))
// .pipe($.revReplace({
// replaceInExtensions: ['.php'],
// manifest: gulp.src(publicBuildFolder + 'rev-manifest.json')
// }))
.pipe(filterHtml)
.pipe(gulp.dest(viewBuildFolder));
});
Original template in /views/master.blade.php
<!-- Vendor Scripts -->
<!-- build:js /build/js/app.js -->
<!-- removed scripts for brevity -->
<!-- endbuild -->
Output in /views/build/master.blade.php
<script src="/build/js/app.js"></script>
Should be:
<script src="/build/js/app-01ab31dk.js"></script>
Just as it says, if I use the example given, it creates the rev, writes the manifest, but does not change the html file until i run the tasks again. I tried to add a wait task in there with no luck. I have a very minute theory that virus scan is reading the manifest file and the task cannot read it so I run this as two new tasks and that is just enough time.
gulp.task("step1", function () {
gulp.src('./src/assets/css/global.css')
.pipe(gulp.dest('./web/assets/css'))
.pipe(rev())
.pipe(gulp.dest('./web/assets/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('./web/assets/css'))
.pipe(wait(5000))
});
gulp.task("step2", function(){
var manifest = gulp.src("./web/assets/css/rev-manifest.json");
return gulp.src("./src/index.html")
.pipe(wait(5000))
.pipe(revReplace({manifest: manifest}))
.pipe(wait(5000))
.pipe(gulp.dest("./web/"));
});
Hi,
options.replaceInExtensions Type: Array Default: ['.js', '.css', '.html', '.hbs']
For this, would this option support .json
and .xml
?
I add it to my gulp-rev
code, every types list on the doc is working fine, except .json
and .xml
, all the revision images are not updating within the .json
and .xml
.
issue related to: https://github.com/sindresorhus/gulp-rev/issues/214
thanks!
Hello,
I try to figure how use gulp-rev with gulp-rev-replace together. I'm not using gulp-useref.
Is it possible to use it alone ?
thanks
Hi
I am trying to upgrade gulp-useref to 3.x.x where they have removed the assets function.
See https://github.com/jonkemp/gulp-useref#migration-from-v2-api
I am trying to maintain a pipeline with gulp-filter, gulp-useref, gulp-rev, and gulp-rev-replace like in your Usage example, but I am not quite sure how to proceed without the assets function.
Can anyone help suggest how to make these plugins work together and in the process we can hopefully get the README updated.
Proposed fix:
I ended up with the following - a bit clumsy - but it works!
If anyone can simplify it please be my guest.
Also - I also show how to generate source maps
var lazypipe = require('lazypipe');
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var sourcemaps = require('gulp-sourcemaps')
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');
gulp.task("index", function() {
var jsFilter = filter("**/*.js");
var cssFilter = filter("**/*.css");
var notIndexFilter = filter(['**/*', '!**/index.html']);
return gulp.src("src/index.html")
.pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))
.pipe(jsFilter)
.pipe(uglify()) // Minify any javascript sources
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(csso()) // Minify any CSS sources
.pipe(cssFilter.restore())
.pipe(notIndexFilter)
.pipe(rev()) // Rename the concatenated files
.pipe(notIndexFilter.restore())
.pipe(revReplace()) // Substitute in new filenames
.pipe(gulp.dest('public'));
});
This won't work for html.erb?
index.html.erb
This may be more of a useref question but I believe you might be able to answer it. My code, similar to the example on the main page, properly generates concatted/minified:
styles/vendor.css
scripts/vendor.js
index.html
in my dist directory, but now what?
Do I now need to change my app to use, by default, dist/index.html vs the regular index.html in my home directory? This would be fine, but then it can't seem to find the vendor.js or vendor.css unless I change the html base tag from
<base href="/" />
To:
<base href="/dist" />
This seems to screw up the other paths/URLs in my angular app, for instance redirecting my home page to:
localhost:8080/dist/posts
instead of:
localhost:8080/posts
Overall I'm just confused by the usage.
Here is the relevant part of my gulpfile, for what it's worth:
var bases = {
app: 'app/',
dist: ['src/main/webapp/dist']
};
gulp.task('clean', function() {
return gulp.src(bases.dist)
.pipe(clean());
});
gulp.task("prodBuild", ['clean'], function() {
var jsFilter = filter(paths.scripts, { restore: true });
var cssFilter = filter(paths.styles, { restore: true });
var indexHtmlFilter = filter(['**/*'], { restore: true });
return gulp.src(['src/main/webapp/index.html'])
.pipe(useref())
.pipe(jsFilter)
.pipe(uglify()) // Minify any javascript sources
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso()) // Minify any CSS sources
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev()) // Rename the concatenated files (but not index.html)
.pipe(indexHtmlFilter.restore)
.pipe(gulp.dest('src/main/webapp/dist'));
});
Due to caching of files (and their contents) it has to contain the entire streams of all the files that will need to be replaced; This results sometimes in building up a large amount of memory which sometimes makes the process quit for stack-overflow style reasons.
I am not sure if there is a good way to fix this (considering you would need all rev'd stream separate from the replacement stream; just an idea though).
Maybe gulp-rev-replace should take two streams as input, and product the modified streams as output instead? or support both?
The gulp-rev only creates a rev name how do i output the files ?
At first I assume that this was what the function did:
.pipe(through.obj(function(file, enc, cb) {
file.path = file.revOrigPath
cb(null, file)
}))
However it doesn't do that it seems, but this would be a cool package to have! gulp-rev-undo
or something haha.
I think that should provide file information to modifyUnreved and modifyReved method.
https://github.com/jamesknelson/gulp-rev-replace/blob/master/index.js#L82
if the css image use the relative path, may have the same url string, so provide the file information to compare with each other.
README.md:
var revReplace = require("gulp-replace");
should be:
var revReplace = require("gulp-rev-replace");
In Spring MVC application I have a set of script tags that in src
attribute have a variable that drives which file version is used: <%=jsSuffix%>
- it is set using application configuration settings during the runtime (long story but I think it has to stay this way):
<script src="build/js/app-vendor<%=jsSuffix%>.js "></script>
<script src="build/js/app-gom<%=jsSuffix%>.js "></script>
<script src="build/js/app<%=jsSuffix%>.js "></script>
Unfortunately gulp-rev
& gulp-rev-replace
does not match this syntax with physical file names (app-vendor.js
and app-vendor.min.js
).
Can this be achieved?
Hi! Can we update the README or a doc page with how to use this with gulp-useref@3 ?
After 2 hours I have found an example here!
https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/asset-revisioning.md
The task shown below fails to replace the not-yet-revved references in my index.html
file. Other than that is is working perfectly. I have tried so many different approaches at this point that I'm considering abandoning this package. The only way I can get it to work is to remove my filters and allow it to write all of CSS and JS files to the root path where the index.html
file resides. Any ideas?
gulp.task('assets-revision', ['analyze', 'clean', 'assets-fonts', 'assets-other'], function() {
var jsFilter = plugins.filter('**/*.js', { restore: true });
var cssFilter = plugins.filter('**/*.css', { restore: true });
return gulp.src([
config.build + '/index.html',
config.build + '/css/**/*.css',
config.build + '/js/**/*.js'
])
.pipe(plugins.rev())
.pipe(jsFilter)
.pipe(gulp.dest(config.build + '/css/'))
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(gulp.dest(config.build + '/js/'))
.pipe(cssFilter.restore)
.pipe(plugins.revReplace());
});
I'm trying to exclude my index.html out of the version renaming, meaning, it becomes index-12ljn123j1n23.html, I need to remain as index.html
Any options to handle this?
Now rev-replace can't replace URI-encoded file name including non-ascii characters such that: %e6%97%a5%e6%9c%ac%e8%aa%9e.jpg
Hi,
I am working on updating minified file references in html files but the replacement part is not working - although min file and manifest file generation is working fine along with html page copy to output directory.
I am working with gulp-rev-replace without gulp-useref and using the same code provided in ReadMe:
`var rev = require("gulp-rev");
var revReplace = require("gulp-rev-replace");
gulp.task("revision", ["dist:css", "dist:js"], function(){
return gulp.src(["dist//*.css", "dist//*.js"])
.pipe(rev())
.pipe(gulp.dest(opt.distFolder))
.pipe(rev.manifest())
.pipe(gulp.dest(opt.distFolder))
})
gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");
return gulp.src(opt.srcFolder + "/index.html")
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(opt.distFolder));
});`
Here is the snapshot showing the output of the process where min file name is not replaced in the html page:
Any help?
// Rewrite references to file names which have been renamed by gulp-rev-all
gulp.task('fingerprintReplace', ['fingerprintGenerate'], () => {
if (config.production) {
// We only need file name without directories
const stripDirectories = function (filename) {
return filename.split('/').slice(0).pop();
};
return gulp.src([config.folder.build + '**/*', '!' + config.folder.build + 'rev-manifest.json'])
.pipe(revReplace({
manifest: gulp.src(config.folder.build + 'rev-manifest.json'),
modifyUnreved: stripDirectories,
modifyReved: stripDirectories
}))
.pipe(gulp.dest(config.folder.build))
.pipe(size({
title: 'dist size'
}));
}
});
Print 01 - Console Errors
Print 02 - Manifest.json
Obs: Only occurs in some files
Lets say you have files named
File (2) will be replaced twice and the result is
foo-123-bar-456
So it turns out that without the replaceInExtensions option, replacements won't work. I had to put that in to get replacements to work. A suggestion for updated documentation would be
gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");
return gulp.src(opt.srcFolder + "/index.html")
.pipe(revReplace({manifest: manifest, replaceInExtensions: ['.html']}))
.pipe(gulp.dest(opt.distFolder));
});
It seems the example given in the readme only works once, because the reference in the file changes, and can no longer be found on subsequent updates of the manifest.
gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");
return gulp.src(opt.distFolder + "/index.html")
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(opt.distFolder));
});
It might be possible to look for old revision references using some regex, but not sure if this would be the best approach if the revision scheme can be changed.
var re = new RegExp(origFileName + "-[a-f0-9]{8}\." + origFileExtension, "g");
Any ideas on how to resolve in-place revision replacement, or whether this should be an update?
Hi,
My revreplace task is ::-
gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("web/public/assets/javascript-build/rev-manifest.json");
return gulp.src("src/Webmuch/HomeBundle/Resources/views/Index/index.html.twig")
.pipe(debug({title: 'unicorn:'}))
.pipe(revReplace({manifest: manifest,replaceInExtensions: ['.html.twig']}))
.pipe(gulp.dest("web/public/assets/javascript-build"));
});
when i work with .html files, it replaces the script tags correctly, but not in .html.twig files . How to achieve that ?
gulp-util
has been recently deprecated. Continuing to use this dependency may prevent the use of your library with the latest release of Gulp 4 so it is important to replace gulp-util
.
The README.md lists alternatives for all the components so a simple replacement should be enough.
Your package is one of the most popular packages still relying on gulp-util
, it would be good to publish a fixed version to npm as soon as possible.
See:
Hi,
Is it possible to use rev-replace
on the same stream as rev
without useref
?
Doing this fails:
gulp.src(ASSETS_GLOB)
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(DIST_FOLDER));
Because index.html
isn't in ASSETS_GLOB
.
Adding it to ASSETS_GLOB
will make rev-replace
revision the HTML file as well, so also bad.
Seems there is a problem with the gulp-rev-replace.
See the file https://github.com/igorlino/gulp-patterns/blob/master/gulpfile.js
it essentially has the same workflow as in the usage page of gulp-rev-replace. The only difference is that sourcemaps have been enabled, which then means a reference sourceMappingURL tag has been created inside the original css and js files to generated sourcemaps files in the same directory.
As the sourcemap files are a derivate of the original filename, only appending a posfix extension. It looks quite similar.
To reproduce:
-Clone project.
-npm install
-gulp build
-Open ./build/styles/ directory
-Open the *.css files and at the very end of the files you see the sourcemap (sourceMappingURL) reference has wrongly been replaced.
I am having an issue where I need the HTML5 outputted to be valid XML so I wish to keep the self closing tag in my link.
I am using useref pretty much exactly as described in the README
I start with this:
<!-- build:css styles/app.css -->
<link rel="stylesheet" href="styles/index.css" />
<!-- endbuild -->
I am ending up with this:
<link rel="stylesheet" href="styles/app-9bd342b9b3.css">
Now this would be perfect if it did not strip the self closing tag. What I want is this:
<link rel="stylesheet" href="styles/app-9bd342b9b3.css"/>
I confirmed its the revreplace and not useref that is doing this. As a matter of fact according to their examples useref will actually add in the self closing tag if its missing.
Can you tell me how I can fix this issue please?
I'm running gulp-rev-all
and then gulp-rev-replace
, gulp-rev-replace
changes the already revved files, but keeps the same hash (I don't know if that's the correct behaviour).
Should gulp-rev-replace
rehash the file?, if that's expected, is there anything I can do to get it working?
Thanks!
Hello, I'm using this code, and basically the main.css is a .less file compiled, but also if I generate it in
/src and get it useref(), the code gets executed before the .css is generated, and it gives an error. If I put an empty main.css it gets compiled before the preprocessor.
Any way to to it? thanks
<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
<!-- build:js js/main.js -->
<script type="text/javascript" src="js/main.js"></script>
<!-- endbuild -->
// Concatenate & Minify JS
gulp.task('js', function() {
gulp.src(src + 'js/**/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest(dest + 'js'))
.pipe(gulp.dest(src+ 'js'));
.pipe(rename('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest(dest + 'js'));
.pipe(gulp.dest(src+ 'js'));
});
// Compile Less
gulp.task('less', function() {
gulp.src(src + 'less/**/*.less')
.pipe(less())
.pipe(concat('main.css'))
.pipe(gulp.dest(dest + 'css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(dest + 'css'));
});
// Html Injects
gulp.task('html', function() {
var assets = useref.assets();
var jsFilter = filter(src + 'js/**/*.js');
var cssFilter = filter(src + 'css/**/*.css');
gulp.src(src + "**/*.html")
.pipe(assets)
// js
.pipe(jsFilter)
.pipe(uglify())
.pipe(gulp.dest(dest + 'css'))
.pipe(jsFilter.restore())
// css
.pipe(cssFilter)
.pipe(less())
.pipe(minifycss())
.pipe(gulp.dest(dest + 'css'))
.pipe(cssFilter.restore())
// rev
.pipe(rev())
.pipe(assets.restore())
.pipe(useref())
.pipe(revReplace())
// dest
.pipe(embedlr())
.pipe(gulp.dest(dest));
});
Hey,
I am a happy user of your library, but as my project grows we have a lot of dependencies.
We could save a lot of space if you added .npmignore
file to your project.
I even found tool that can help you with it: https://github.com/inikulin/dmn
Thanks!
Hi all.
As you've probably noticed, I'm not taking as much care of this project as I could be. I don't use this project in any of my own builds anymore, and I honestly don't understand the ecosystem well enough to judge whether to accept the Pull Requests I'm receiving.
Would anyone be interested in taking over maintenance for this project?
Why would that happen?
gulp.task('injectfiles',
['js', 'vendorjs', 'css', 'vendorcss'], function () { // these tasks create the minified 4 css and js files
log('Building index.html to stage');
var minified = pkg.paths.stage + '**/*.min.*';
var index = pkg.paths.client + 'index.html';
var minFilter = plug.filter(['**/*.min.*', '!**/*.map']);
var indexFilter = plug.filter(['index.html']);
return gulp
.src([].concat(minified, index)) // add all staged min files and index.html
.pipe(minFilter) // filter the stream to minified css and js
.pipe(plug.rev()) // create files with rev's
.pipe(gulp.dest(pkg.paths.stage)) // write the rev files
// if we create and write rev.manifest here, replace doesn't happen.
.pipe(minFilter.restore()) // remove filter, back to original stream
.pipe(indexFilter) // filter to index.html
.pipe(inject('content/vendor.min.css', 'inject-vendor'))
.pipe(inject('content/all.min.css'))
.pipe(inject('vendor/vendor.min.js', 'inject-vendor'))
.pipe(inject('all.min.js'))
.pipe(indexFilter.restore()) // remove filter, back to original stream
.pipe(plug.revReplace()) // Substitute in new filenames
.pipe(gulp.dest(pkg.paths.stage)) // write the index.html file changes
.pipe(plug.rev.manifest()) // create the manifest (must happen last or we screw up the injection)
.pipe(gulp.dest(pkg.paths.stage)); // write the manifest
function inject(path, name) {
var glob = pkg.paths.stage + path
var options = {
ignorePath: pkg.paths.stage.substring(1),
read: false
};
if (name) { options.name = name; }
return plug.inject(gulp.src(glob), options);
}
});
I'm looking to replace the CSS and JS references in my header and footer PHP files.
They located at src/app/templates/boolean/header.php
and src/app/templates/boolean/footer.php
Is there a way to easily fit them into my assets
task below?
'use strict';
const argv = require('yargs').argv;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const concat = require('gulp-concat');
const cssnano = require('gulp-cssnano');
const gulp = require('gulp');
const gzip = require('gulp-gzip');
const newer = require('gulp-newer');
const phplint = require('phplint').lint
const phpMinify = require('gulp-php-minify');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const rev = require('gulp-rev');
const revreplace = require('gulp-rev-replace');
const sass = require('gulp-sass');
const size = require('gulp-size');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const when = require('gulp-if');
// 'gulp scripts' -- creates a app.js file from your JavaScript files and
// creates a Sourcemap for it
// 'gulp scripts --prod' -- creates a app.js file from your JavaScript files,
// minifies, gzips and cache busts it. Does not create a Sourcemap
gulp.task('scripts', () =>
// NOTE: The order here is important since it's concatenated in order from
// top to bottom, so you want vendor scripts etc on top
gulp.src([
'src/app/assets/javascript/test.js'
])
.pipe(newer('.tmp/app/assets/javascript/app.js', {dest: '.tmp/app/assets/javascript', ext: '.js'}))
.pipe(when(!argv.prod, sourcemaps.init()))
.pipe(concat('app.js'))
.pipe(size({
showFiles: true
}))
.pipe(when(argv.prod, rename({suffix: '.min'})))
.pipe(when(argv.prod, when('*.js', uglify({preserveComments: 'some'}))))
.pipe(when(argv.prod, size({
showFiles: true
})))
.pipe(when(argv.prod, rev()))
.pipe(when(argv.prod, revreplace({
replaceInExtensions: ['.php']
})))
.pipe(when(!argv.prod, sourcemaps.write('.')))
.pipe(when(argv.prod, gulp.dest('.tmp/app/assets/javascript')))
.pipe(when(argv.prod, when('*.js', gzip({append: true}))))
.pipe(when(argv.prod, size({
gzip: true,
showFiles: true
})))
.pipe(gulp.dest('.tmp/app/assets/javascript/'))
);
// Styles
gulp.task('styles', function () {
return gulp.src('src/app/assets/scss/style.scss')
.pipe(when(!argv.prod, sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(postcss([
autoprefixer({browsers: 'last 2 versions'})
]))
.pipe(size({
showFiles: true
}))
.pipe(when(argv.prod, rename({suffix: '.min'})))
.pipe(when(argv.prod, when('*.css', cssnano({autoprefixer: false}))))
.pipe(when(argv.prod, size({
showFiles: true
})))
.pipe(when(argv.prod, rev()))
.pipe(when(!argv.prod, sourcemaps.write('.')))
.pipe(when(argv.prod, gulp.dest('.tmp/app/assets/stylesheets')))
.pipe(when(argv.prod, when('*.css', gzip({append: true}))))
.pipe(when(argv.prod, size({
gzip: true,
showFiles: true
})))
.pipe(gulp.dest('.tmp/app/assets/stylesheets'))
.pipe(when(!argv.prod, browserSync.stream()))
});
// PHP
gulp.task('phplint', function (cb) {
phplint(['src/**/*.php'], {limit: 10}, function (err, stdout, stderr) {
if (err) {
cb(err)
process.exit(1)
}
cb()
})
})
// PHP minify
gulp.task('phpminify', () =>
gulp.src('src/**/*.php', {read: false})
.pipe(when(argv.prod, phpMinify()))
.pipe(gulp.dest('.tmp'))
);
gulp-rev-replace doesn't seem to be accepting .json files, even when adding 'json' to the replaceInExtensions options. This is to support versioning of pwa manifest.json files.
Paths check out (via console)
see my gulp task below.
gulp.task('revReplaceManifest', function() {
console.log('REV Manifest: ', `${paths.dist}/${paths.client.revManifest}`);
console.log('PWA Manifest: ', 'dist/client/manifest.json');
return gulp.src('dist/client/manifest.json')
.pipe(plugins.revReplace({
replaceInExtensions: ['.json'],
manifest: gulp.src(`${paths.dist}/${paths.client.revManifest}`)
}))
.pipe(gulp.dest('dist/client'));
});
Hi,
Is there an easy way to prevent rev-replace replacing inline sourcemap references?
This:
/*# sourceMappingURL=style.css.map */
Becomes this:
/*# sourceMappingURL=style-g623af6a92.css.map */
I'd even say this is a bug since it matches something.css
inside of something.css.map
, which is wrong since that's not an occurence of something.css
.
var rev = require("gulp-rev");
var addsrc = require('gulp-add-src');
var revReplace = require("gulp-rev-replace");
gulp.task("revision", ["dist:css", "dist:js"], function(){
return gulp.src(["dist/**/*.css", "dist/**/*.js"])
.pipe(rev())
.pipe(addsrc('./*.html'))
.pipe(revReplace())
.pipe(gulp.dest(opt.distFolder))
});
It is more simple.
Taking some ideas from: gulp-asset which combines a bunch of things into one...
asset
(could just be a string for simplicity)asset://myspecial/images/file.png
gulp-rename
... so maybe just have the scheme option?asset://myspecial/images/file.png
http://mycdn.website.com/myspecial/images/file.png
gulp-rev-collector
or gulp-clone
in my opinion.I would be willing to implement them; just curious what people think about them that use this library etc. Should it be included in this library? if not, is there any library? ...
When using gulp-useref to combine files if you put the combined file in a subdirectory, gulp-rev will rename the files and they will be placed in the subdirectory but gulp-rev-replace will not replace the file names in the HTML file.
This will work:
<!-- build:css normalize.css -->
<link rel="stylesheet" href="css/normalize.css">
<!-- endbuild -->
But this will not:
<!-- build:css css/style.css -->
<link rel="stylesheet" href="css/style.css">
<!-- endbuild -->
The final HTML produced would look like this:
<link rel="stylesheet" href="normalize-66961048.css"/>
<link rel="stylesheet" href="css/style.css"/>
Getting a false positive in a bundled js file for an external library that contains
document.documentElement.style.cssFloat
style.css
is replaced with the rev'd string from the manifest, invalidating the bundle.
in my project,my url is like ../commom/pubfun ,but use gulp-rev product url name like common/pubfun.js .so i want to change it to common/pubfun ...could you help me?
Hi, I'm using gulp-rev-replace
for a while and it's fine, until I decide replace "plain html" with template. I found gulp-rev-replace can not replace path in jade, then I read doc and issues and got nothing useful. Does anyone has some advices?
rev-replace will replace original
<script> x.js</script>
with
<script>x.somehash.map</script>
Here is my gulp task:
.pipe(useref())
.pipe(jsFilter)
.pipe(sourcemaps.init())
.pipe(ngAnnotate())
.pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
.pipe(rev())
.pipe(sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe(revReplace())
I'm wondering how to get gulp-rev-replace to replace file references with the same hash across multiple html files. Considering the following:
And the following html statements:
index.html:
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
subfolder/index.html:
<!-- build:css ../styles/main.css -->
<link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
And the following in my Gulpfile
gulp.task('html', ['styles'], () => {
const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
return gulp.src('app/**/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
.pipe($.rev())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('dist'));
});
index.html will get replaced with the correct styles and scripts reference, while subfolder/index.html will get an entirely new hash.
Am I setting up my Gulpfile incorrectly?
gulp task:
`gulp.task('rev-update-references', function(){
const manifest = gulp.src(getBuildRoot() + '/' + config.tasks.production.manifest)
return gulp.src(path.join(getBuildRoot() + '//.{css,js,json}'))
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(getBuildRoot()))
})`
scss:
`@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 400;
src: url(sourcesanspro-regular-webfont.woff) format("woff"),
url(sourcesanspro-regular-webfont.woff2) format("woff2")
}
body {
font-family: "Source Sans Pro";
}`
resulting css:
`@font-face {
font-family: Source Sans Pro;
font-style: normal;
font-weight: 400;
src: url(sourcesanspro-regular-webfont.woff?v=5a29a8b022) format("woff"),
url(sourcesanspro-regular-webfont.woff?v=5a29a8b0222?v=84061ed321) format("woff2")
}
body {
font-family: Source Sans Pro
}`
Problem: inside the compiled CSS the .woff2 filename is truncating the "2" in the extension, plus appending an extra (unknown) hash.
Has anyone faced a similar issue? Or can anyone confirm if woff2 is being rev'd correctly inside their referenced CSS?
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.