Livereload CSS within browser


#1

I have switched from nwjs to electron and in nwjs I was able to use the following in the index.html:

<script>
var gulp = require('gulp');
gulp.task('css', function () {
   var styles = document.querySelectorAll('link[rel=stylesheet]');  
   for (var i = 0; i < styles.length; i++) {
   var restyled = styles[i].getAttribute('href') + '?v='+Math.random(0,10000);
       styles[i].setAttribute('href', restyled);
   };
});
gulp.watch(['css/*.css'], ['css']);
</script>

Which would obviously reload the css and you’ll see an immediate change when tweaking the styles.
The same does not work in Electron. Gulp watch doesn’t seem to be watching… What am I missing?
(I’ve naturally used gulp-livereload, but one has to wait for the whole thing to reload and time is lost…)
Cheers
Petr


#2

I’ld check the gulp root path in the browser window, because it may looks for files in the wrong directory.


#3

That was it! Works great now. A real time saver :slight_smile:

gulp.watch([__dirname + '/css/*.css'], ['css']);

Thanks!