A very simple script to watch for .js & .css files present in DOM
over AJAX and reload the page/CSS when changes are detected.
At the boottom of you <body>, after all <script> tags add this:
<script src="watchem.js"></script>You can add more files to watchem or exclude some by:
var watchemToo = window.watchemToo || (window.watchemToo = {});
watchemToo['/assets/someModule.js'] = true; // watch
watchemToo['/assets/jquery.js'] = false; // don't watchIt makes HEAD requests to the server in the specified interval and compares
ETag or Last-Modified and Content-Length and Content-Type header with the stored value.
If server does not return any of the tracked headers, it makes
GET requests (which are more expensive) and compares the contents of the file.
I find it best suited for TDD / BDD and for designing using HTML & CSS.
I've built this script to automatically run Jasmine specs inside a Chrome Extension on source files change (do you know about Karma?), but it can be successfully used for any web app.
For advanced stuff I recomend BrowserSync (requires Node.js).
Requires one of:
- jAJAX
- or jQuery v1.5+
- or Zepto v1.1+ "callbacks" and "deferred" modules loaded
- or a custom method named
jajaxthat looks like this one:
window.jajax = function (opt, suc, err) {
return jQuery.ajax(opt).done(suc).fail(err)
}I've tested it on Google Chrome 39 so far. I don't know when I would need to use it in other browser, but PRs are welcome.
- Live.js
- BrowserSync (requires Node.js)
- Live Reload (native app)