gulp watch一个目录怎么刷新一个页面的
展开全部
使用gulp插件来自动刷新页面。再也不用修改一次,按一下F5了。
首选通过npm install gulp安装gulp。
在安装npm install gulp-connect。自动刷新,主要是通过这个插件来完成的。
最后配置gulpfile.js,内容如下:
var gulp = require('gulp'),
connect = require('gulp-connect');//使用connect启动一个Web服务器
gulp.task('connect', function() {
connect.server({
host: '192.168.1.172', //地址,可不写,不写的话,默认localhost
port: 3000, //端口号,可不写,默认8000
root: './', //当前项目主目录
livereload: true //自动刷新
});
});
gulp.task('html', function() {
gulp.src('./*.html')
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch('./css/*.css', ['html']); //监控css文件
gulp.watch('./js/*.js', ['html']); //监控js文件
gulp.watch(['./*.html'], ['html']); //监控html文件
}); //执行gulp server开启服务器
gulp.task('server', ['connect', 'watch']);
接着使用gulp server开启服务器,浏览器打开地址,就这么简单。手机电脑同步刷新。
需要注意的是,如果有添加新文件,比如新的js文件,可能需要重新启动服务。
你也可以下载下面的文件,丢进你的项目根目录(可能需要修改IP),然后运行gulp server即可。
首选通过npm install gulp安装gulp。
在安装npm install gulp-connect。自动刷新,主要是通过这个插件来完成的。
最后配置gulpfile.js,内容如下:
var gulp = require('gulp'),
connect = require('gulp-connect');//使用connect启动一个Web服务器
gulp.task('connect', function() {
connect.server({
host: '192.168.1.172', //地址,可不写,不写的话,默认localhost
port: 3000, //端口号,可不写,默认8000
root: './', //当前项目主目录
livereload: true //自动刷新
});
});
gulp.task('html', function() {
gulp.src('./*.html')
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch('./css/*.css', ['html']); //监控css文件
gulp.watch('./js/*.js', ['html']); //监控js文件
gulp.watch(['./*.html'], ['html']); //监控html文件
}); //执行gulp server开启服务器
gulp.task('server', ['connect', 'watch']);
接着使用gulp server开启服务器,浏览器打开地址,就这么简单。手机电脑同步刷新。
需要注意的是,如果有添加新文件,比如新的js文件,可能需要重新启动服务。
你也可以下载下面的文件,丢进你的项目根目录(可能需要修改IP),然后运行gulp server即可。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询