Is there a way to remove the URL cache busting parameters for external CDN resources?
I want to have cache busting for my library files, but not for external jquery cdn files.
Right now I'm using:requirejs.config({ urlArgs : "v1.1"}); to have the cache busting.
Any suggestions how to do this?
Thanks
This is certainly the oldest question I've answered so far!
I've created this fiddle to use RequireJS contexts, but it doesn't seem to work.
The contexts load the modules from the different paths ok, but both calls to require() use the cache bust (urlArgs) parameter.
So my conclusion would be you can't do what you want to do out-of-the-box.
http://jsfiddle.net/FXSSf/5/
// Fiddle to try and have two RequireJS contexts, one without cache bust for CDN and one with cache bust for 'our' files
// See http://requirejs.org/docs/api.html#multiversion
// ensure that $ is invalid to begin with
var $ = null;
var cdnRequire = require.config({
paths: {
"jquery": "http://code.jquery.com/jquery-1.9.1"
},
urlArgs: ""
});
var ourRequire = require.config({
baseUrl: "https://gist.github.com/gitgrimbo/5130393/raw/b9402d4dfb00ff0ad3211f30681bb6d0411e4295",
urlArgs: "ourRequire-" + new Date().getTime()
});
// cdnRequire should *not* use cache bust parameter
cdnRequire(["jquery"], function ($) {
alert($.fn.jquery);
// ourRequire *should* use cache bust parameter
ourRequire(["gistfile1"], function (myModule) {
alert(myModule);
});
});
Related
I am working with apostrophe cms right now and have put the entire application behind a SAML IDP using Apostrophe-Saml. however, I have noticed that files that users upload, are placed into a 'public' directory and can be viewed without logging in. Is there a way that uploaded images/videos/files can be secured behind authentication?
The apostrophe-express module has a middleware option, but this does not appear to be used when accessing static content.
My next attempt was to override an apostrophe-assets method
self.servePublicAssets = function() {
var middleware = [];
if (self.lessMiddleware) {
// bc: only if the new implementation of enableLessMiddleware is in place.
// If it's an old override, it'll already be added to Express and
// this property won't be set
middleware.push(self.lessMiddleware);
}
//THIS NEXT LINE IS THE LINE OF INTEREST
middleware.push(self.apos.express.static(self.apos.rootDir + '/public'));
//SEE THE LINE ABOVE
self.expressMiddleware = {
// Run really early, before all of the stuff apostrophe-express normally
// puts in, for performance reasons. Preempts expensive
// queries related to `apostrophe-global` on every static file
when: 'beforeRequired',
middleware: middleware
};
};
I essentially tried to swap the 'line of interest' out for something that looks like this:
middleware.push(self.apos.app.use(self.apos.rootDir + '/public', authMethod(), self.apos.express.static(self.apos.rootDir + '/public')));
But this did not appear to work either. Does anyone have any ideas or know exactly how to do this? Thanks.
While difficult at the time the question was asked, this is now straightforward: install and configure the apostrophe-secure-attachments module.
Was going through gulp packages on the npm website and came across this package called gulp-rename-md5. Is there a scenario where renaming a file using MD5 is useful and why?
I've used a similar tool for cache busting (called gulp-freeze which adds an MD5 hash of the file contents to the filename).
When you update a CSS or JS file you want users to get the latest version of that file when they visit your site. If your file is named "app.min.js" and you update it, their browsers might not pull down the latest file. If you're using a CDN even clearing the browser cache probably won't request the new file.
I've used gulp-freeze with gulp-filenames (to store the name of the cache busted file) and gulp-html-replace (to actually update the <link /> or <script /> tags with the name of this cache busted file in the html). It's really handy.
CODE SAMPLE
This will get your files, use gulp-freeze to build the hash, use gulp-filenames to store the name of that file, then write that to the html with gulp-html-replace. This is tested and working
var gulp = require("gulp"),
runSequence = require("run-sequence"),
$ = require("gulp-load-plugins")();
gulp.task("build", () => {
runSequence("js", "write-to-view");
});
gulp.task("js", () => {
return gulp
.src("./js/**/*.js")
.pipe($.freeze())
.pipe($.filenames("my-javascript"))
.pipe(gulp.dest("./"));
});
gulp.task("write-to-view", () => {
return gulp
.src("index.html")
.pipe(
$.htmlReplace(
{
js: $.filenames.get("my-javascript")
},
{ keepBlockTags: true }
)
)
.pipe(gulp.dest("./"));
});
EDIT
I should add that index.html just needs these comments so gulp-html-replace knows where to write the <script /> element
<!--build:js-->
<!-- endbuild -->
One of advantages is that you can setup your app to cache files with MD5 sum in their name (e.g. mystyle.a345fe.css) for long time (several months) because you know that this file will never be modified. This will save you some traffic and your web will be faster for returning visitors.
Framework: node.js / express.js / Jade
Question: in production env, when a jade file is rendered by express, jade cache's it so future renders are faster.
When I start node.js app, how can I pre-compile (or) pre-render (like warmup) all the jade files so its already in cache when requests start to come in...
I can use a folder recursion, I just need to know how to pre-compile (or) pre-render.
Is this possible?
Jade has template pre-compiling and caching built in.
http://jade-lang.com/api/
Simply specify cache: true option to jade.compileFile, and iterate through all of your template files.
var options = {cache: true};
// iterate/recurse over your jade template files and compile them
jade.compileFile('./templates/foo.jade', options);
// Jade will load the compiled templates from cache (the file path is the key)
jade.renderFile('./templates/foo.jade');
If you're not using any parameters, you can compile jade templates directly to HTML with grunt or gulp and make it watch for file modifications
Try it from the command-line:
jade view/map-beacons.jade -D
If you do need to use parameters I would use something like in Andrew Lavers answer.
compileFile returns a function which you can use to pass in parameters i.e. fn({ myJsVar: 'someValue' })
There is also a client option in the command-line but I didn't find any use for it :
jade view/map-beacons.jade -cD
i do this solution, this code outside http.createServer function
let cache_index=jade.renderFile('index.jade');
and when return view
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end(cache_index);
when use this solution server return index to 1ms
but without solution server return index between 150ms to 400ms
result:
Picture 1 with cache
Picture 2 without cache
I'm developing a web application and I'm using about 20 bower_components (bootstrap, jquery, some jquery plugin like cookie and serializejson, mousewheel, mustache, underscore etc).
All these plugins are quite small (except for bootstrap and jquery), but are loaded with a dedicated "" tag.
This makes my page asks for 20 micro javascript files and this makes the page load slowly.
I'd like to bundle all these scripts together and load the bundle...
I've tried with gulp-bower-src but it just help me to uglify them and move them in a "lib" folder... Can't find a way to compress them all together.
This is my gulp task atm
var filter = gulpFilter("**/*.js", "!**/*.min.js");
gulp.task("default", function () {
bowerSrc()
.pipe(filter)
.pipe(uglify())
.pipe(filter.restore())
.pipe(gulp.dest(__dirname + "/public/lib"));
});
How can I do?
You can use gulp-concat to bundle all these micro files into one asset.
var concat = require('gulp-concat');
var filter = gulpFilter("**/*.js", "!**/*.min.js");
gulp.task("default", function () {
bowerSrc()
.pipe(filter)
.pipe(uglify())
.pipe(concat('bundle.js'))
.pipe(filter.restore())
.pipe(gulp.dest(__dirname + "/public/lib"));
});
This will concat all filtered and uglified files as bundle.js into directory public/lib. Keep in mind that when concatenating these files the order of files matters. I guess that gulp-bower-src does not order scripts according to a dependency graph (I found nothing in the documentation) so it might require you to select the bower files by hand in the right order.
A manual ordering/selecting of the bower components could be done by substituting the bowerSrc() by a line somehow like this
gulp.src(['./bower_components/jquery/jquery.js', './bower_components/jquery-ui/jquery-ui.js', './bower_components/jquery-swift-color-picker/color.js']);
This may seem a little clumsy and it is but order matters.
I read a lot about module cache invalidation in Nodejs, and still cannot figure it out.
Here's a short example, which I can't get my head around:
//a.js
var x=0;
console.log('loaded');
exports.y = function() {};
//b.js
var v1 = require('./a.js'); //displays "loaded"
delete require.cache[require.resolve('a.js')];
var v2 = require('./a.js'); //DOES NOT display "loaded". WHY?
console.log(v1 === v2); //displays false, so it's a different instance
Basically, what I need it that x be a different variable inbetween calls.
Shouldn't the message "loaded" be displayed twice?
Thanks in advance,
Catalin
UPDATE.
Basically I need this functionality in swagger (Rest services documentation generator) because I'd like to export more API groups on different url's, and since the only module I have found to do it is swagger-node-express, it is created as a module with modular variables. So I need to somehow invalidate it entirely so as to be able to generate more documentations from the same codebase.