gulp-livereload使用教程(浏览器自动刷新)

1、1 有的gulp.task()没有运行，就reloaded完了我在实际使用过程中也遇到一些问题，有的处理单独类型文件的gulp.task()没有执行，导致没能生成文件。解决思路：拿官方的示例和网友的示例（网友的监听文件值：path/**/*.*）做了对比，网友的示例虽然给力，但存在漏洞——livereload是基于文件的，文件不存在自然不能reload。但实际上我们已经写了生成文件的代码（如.less编译成.css），这说明生成文件的源文件（如.less）虽然被watch（监听），但处理这个文件的gulp.task()并没有执行，自然没有文件提供给livereload的gulp.task()。解决这个问题就要把所有需要生成的/修改的/删除的文件全部先处理好，最后reload。分成下面两步进行：

2、A. 把livereload放在最后执行(各个任务单独watching)。例如先监听.css和.js的gulp.task('less',function(){ gulp.watch('app/scss/*.less',['style']);})这里新建一个叫less的任务监听并编译.less文件。再来个监听处理.js文件（下面的代码）。gulp.task('js',function(){ gulp.watch('app/src/*.js',['script']);})那么.css和.js文件的处理由less和js两个watch来完成。不再放到reload的watch里。避免直接reload而需要的文件没能生成。这样一来就多了单独watch（上面的less和js）部分的步骤，但其实也有好处：有时候你并不需要视图（view），而是直接撰写并编译。例如：当你只需要写less文件的时候，你可以直接执行：gulp less就可以监听并编译.less文件，而不用管其他文件，执行速度会高些。

3、B. 把全部gulp.watch合成一个gulp.task()这里通过一个task来完成构建和reload。如下：gulp.task('watcher',['less','js','reload']);这一步就是创建一个叫watcher的task，来执行前面的less、js、reload。我们把reload放在最后，这样就在less、js那里把我们指定的.css和.js生成之后再reload。这就保证你需要reload的文件都存在。而不会出现文件没有生成就直接执行reload的情况。C. 我提到的情况并不是必然发生的，我有按照网的友示例直接reload就能完成所有任务的，但是总会有例外。在不熟悉的情况下还是保证所有文件生成再reload比较稳妥，虽然会有一定的耗时（因为任务步骤变多了）。