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>