用户登录

当某些文件发生变化以后,可以实时的去刷新一下浏览器,这样我们就不需要每次修改文件以后,再去手工刷新浏览器查看变化了。

打开 gulpfile.js ... 找到创建服务器的这个任务 .. 在这里,可以先把 server 方法里面的 livereload 这个选项的值设置成 true .. 意思就是启用实时刷新的功能。

connect.server({root: 'dist', livereload: true});

然后,我们可以配置一下,当什么样的文件发生变化的时候,去自动刷新浏览器 .. 比如我们想让浏览器在 index.html 这个文件发生变化以后,去刷新一下 ...

在这个 copy-index 任务里面,把文件复制到目的地以后,再执行一下刷新 ... 在后面加上一个 .pipe 管道 .. 这个管道干的事就是去刷新浏览器 ... 可以使用 connect 的 reload 这个方法 ..

gulp.task('copy-index', function () {
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
});

因为在下面的 watch 这个任务里面,我们已经监视了 index.html 这个文件的变化,一旦发生变化,就去执行 copy-index 这个任务,这个任务现在要做的事就是去把 index.html 复制到 dist 这个目录的下面,然后再刷新一下浏览器 ..

最后我们可以再去创建一个默认的任务 ... 输入 gulp.task ... 任务的名字是 default ... 这个任务依赖 server ... 还有 watch 这两个任务 ...

gulp.task('default', ['server', 'watch']);

保存 ... 打开命令行工具 .. 先停止一下服务器 ... ctrl + C ... 然后再执行 gulp ... 这样会起动服务器,并且开始监视文件的变化 ..

打开浏览器,刷新一下 ... 再回到项目 ... 打开根目录下面的 index.html ... 这里我们可以修改一下这个文件 ... 然后保存一下 ... 你会发现,在浏览器上,会实时的显示出文件的变化 ...

实时预览《 Gulp 自动化任务 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点