The problem is that when you're doing F5 or Ctrl+R (or using you're browser inspect tool), the headers sent to get the file asks for no cache for every file, and interprete all JS, assuming you're working on a browser project.
A possible easy to set up solution would be to make a small dedicated HTTP server which looks at the modification date of the file to serve and which returns only an 304 Not Modified
header even if the browser specifies a if-modified-since
header (which means that the file requested is cached by the browser).
Scenario:
The client asks for JS files (for the second time) with a if-modified-since: Wed, 09 Dec 2015 12:18:00 GMT
header to your localhost:8888
If the file on disk is less recent, file server sends a 304 header
If the file is newer so the file server streams the file, specifying Date: Wed, 09 Dec 2015 12:20:00 GMT
and cache-control: public, max-age:3600, must-revalidate
Edit: so this is a tiny NodeJS file server. Just install NodeJS, add npm
. Create this file as index.js, set the wwwpath variable, run npm install node-static
in the same folder as index.js (it is a dependency of the file server below), and execute the program with nodejs index.js
(or node index.js
on Windows).
var static = require('node-static');
var fs = require('fs');
var wwwpath = './www';
var fileServer = new static.Server(wwwpath);
require('http').createServer(function (request, response) {
request.addListener('end', function () {
fileServer.serve(request, response, function (err, result) {
var filepath = wwwpath + request.url;
// browser is checking cache
if (request.headers && request.headers['if-modified-since']) {
var ifModifiedSince = new Date(request.headers['if-modified-since']);
var stats = fs.statSync(filepath);
// file has been edited since
if (stats.mtime.getTime() > (ifModifiedSince.getTime() + 1000)) { // +1000 Date header is no millisecond accurate
response.writeHead(304, 'Not Modified');
response.end();
}
}
// file not found / ...
if (err) {
response.writeHead(err.status, err.headers);
response.end();
}
});
}).resume();
}).listen(8080);
What does it do ? If you have a file myscript.js in wwwroot, call it with http://localhost:8080/myscript.js. If you refresh your page, the server will check the edit time of the file before streaming it.
grunt
?