要使用gulp.js来自动刷新浏览器,可以使用插件gulp-connect和gulp-livereload。
首先,安装这些插件:
“`
npm install gulp-connect gulp-livereload –save-dev
“`
然后,在Gulpfile.js中添加以下代码:
“`javascript
var gulp = require(‘gulp’);
var connect = require(‘gulp-connect’);
var livereload = require(‘gulp-livereload’);
// 启动服务器并监听文件变化
gulp.task(‘server’, function() {
connect.server({
root: ‘./’,
livereload: true
});
// watch方法监视文件变化并刷新页面
gulp.watch([‘*.html’, ‘*.js’]).on(‘change’, function(file) {
livereload.changed(file.path);
});
});
// 默认任务
gulp.task(‘default’, [‘server’]);
“`
在上述代码中,我们使用gulp-connect启动一个Web服务器,并通过livereload插件实现自动刷新。’server’任务通过watch方法监视HTML和Javascript文件的变化。当这些文件有任何更改时,livereload将重新加载浏览器。最后,我们在默认任务中运行’server’任务。
现在,运行以下命令启动Gulp并启动服务器:
“`
gulp
“`
在浏览器中打开你的网页,现在你应该可以看到当你修改HTML和Javascript文件时,自动重新加载页面了。
文章为原创或者来自于互联网,转载请注明来源,如果文章有侵权请联系,我们会及时删除。