- Notifications
You must be signed in to change notification settings - Fork3.9k
Livereload nw.js on changes
When you are working on a prototype it's faster to reload the nw.js windowautomatically on file changes.
You can add this script tag to the end of your main file:
<script>varpath='./';varfs=require('fs');varreloadWatcher=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>varGaze=require('gaze').Gaze;vargaze=newGaze('**/*');gaze.on('all',function(event,filepath){if(location)location.reload();});</script>
npm install chokidar
<script>varchokidar=require('chokidar');varwatcher=chokidar.watch('.',{ignored:/[\/\\]\./});watcher.on('all',function(event,path){if(location&&event=="change")location.reload();});</script>
npm install gulp
<script>vargulp=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 taskin gulp only to css files.
<script>vargulp=require('gulp');gulp.task('html',function(){if(location)location.reload();});gulp.task('css',function(){varstyles=document.querySelectorAll('link[rel=stylesheet]');for(vari=0;i<styles.length;i++){// reload stylesvarrestyled=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 thenode-main module:
# Define a new `reload` task in Gulp that simply refreshes the current pagegulp.task'reload',-># Log that we're reloading the appconsole.log'Reloading app...'# Clear and delete node-webkit's global required modules cache.# See: http://stackoverflow.com/q/25143532/for module_name,moduleofglobal.require.cachedeleteglobal.require.cache[module_name]# Refresh the pagewindow.location.reload()# Set Gulp to watch all files, and reload the page when it detects a change.gulp.watch'**/*', ['reload']