Fetching latest commit…
watchem.js
@version 0.4.0
A very simple script to watch for .js & .css files present in DOM
over AJAX and reload the page/CSS when changes are detected.
Usage
Just throw the watchem.min.js into your HTML and it starts watching your assets.
That simple!
At the boottom of you <body>, after all <script> tags add this:
<script src="watchem.min.js" async></script>You can stop the watcher from console
watchem.stop(); // stops the wather and remembers the state in localStorageand start it later
watchem.start();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 watchHow it works
It 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.
When should I use it
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).
Dependencies
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)
}Browser Compatibility
I've tested it on Google Chrome 39-47, Safari 5.1-9.0 and Firefox 36-41 so far. I don't know when I would need to use it in other browser, but PRs are welcome.
Alternatives
- Live.js
- BrowserSync (requires Node.js)
- Live Reload (native app)
- NppSync (for Notepad++ lovers)