Livereload nw.js on changes
When you are working on a prototype it's faster to reload the nw.js window automatically on file changes.
You can add this script tag to the end of your main file:
<script>
var path = './';
var fs = require('fs');
var reloadWatcher=fs.watch(path, function() {
location.reload();
reloadWatcher.close();
});
</script>NodeJS modules loaded with require() will be cached in require.cache. If these modules ought to be reloaded along with the page, add the following to the reloadWatcher listener:
for(var i in require.cache) {
delete require.cache[i];
}
It will be limited to watching files directly within the current directory.
You can add an option to the previous example to watch all subdirectories: fs.watch(path, { recursive: true }, listener). The recursive option is only currently supported on OS X and Windows. For a more robust solution, first you need to install "gaze", "chokidar" or "gulp", and then change the script tag content:
npm install gaze
<script>
var Gaze = require('gaze').Gaze;
var gaze = new Gaze('**/*');
gaze.on('all', function(event, filepath) {
if (location)
location.reload();
});
</script>npm install chokidar
<script>
var chokidar = require('chokidar');
var watcher = chokidar.watch('.', {ignored: /[\/\\]\./});
watcher.on('all', function(event, path) {
if (location && event == "change")
location.reload();
});
</script>npm install gulp
<script>
var gulp = require('gulp');
gulp.task('reload', function () {
if (location) location.reload();
});
gulp.watch('**/*', ['reload']);
</script>Or if you don't want to reload the entire app when editing styles, you can attach a style task in gulp only to css files.
<script>
var gulp = require('gulp');
gulp.task('html', function () {
if (location) location.reload();
});
gulp.task('css', function () {
var styles = document.querySelectorAll('link[rel=stylesheet]');
for (var i = 0; i < styles.length; i++) {
// reload styles
var restyled = styles[i].getAttribute('href') + '?v='+Math.random(0,10000);
styles[i].setAttribute('href', restyled);
};
});
gulp.watch(['**/*.css'], ['css']);
gulp.watch(['**/*.html'], ['html']);
</script>Use format allowing file: URLs. https://github.com/livereload/livereload-js#using-livereloadjs
[
'http://',
(location.host || 'localhost').split(':')[0],
':35729/livereload.js'
].join('')If you want to reload and re-run your node modules, you'll need to delete the global require cache (global.require.cache). See this StackOverflow question. Note that this will remove ALL modules from the cache, possibly including the node-main module:
# Define a new `reload` task in Gulp that simply refreshes the current page
gulp.task 'reload', ->
# Log that we're reloading the app
console.log 'Reloading app...'
# Clear and delete node-webkit's global required modules cache.
# See: http://stackoverflow.com/q/25143532/
for module_name, module of global.require.cache
delete global.require.cache[module_name]
# Refresh the page
window.location.reload()
# Set Gulp to watch all files, and reload the page when it detects a change.
gulp.watch '**/*', ['reload']