gulp-livereload组件使用

1.添加gulp-livereload组件

npm install --save-dev gulp gulp-livereload

会在package.json中添加如下内容:

  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.1"
  }

2.新建gulpfile.js文件

var gulp = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('src/**/*.*', function(file) {
        livereload.changed(file.path);
    });
});

3.命令行运行gulp

gulp watch

4.命令行启动http-server

http-server

5.chrome浏览器打开页面

http://localhost:8080/
安装livereload插件，点击地址栏右边livereload按钮变成实心圈即为启用。它会自动增加如下代码到html

<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.1.0"></script>