当前位置: 首页 > 后端技术 > Node.js

gulp+browser-sync实现前端自动刷新

时间:2023-04-03 21:14:55 Node.js

写在安装环境之前,默认安装node环境,基本的命令行操作步骤会初始化环境新建一个文件夹,打开文件夹下的命令行npminit,回车到default选项即可,也可以自己设置。最后回车后,会生成一个package.json文件来安装gulp。如果是第一次使用gulp,需要全局安装gulpnpminstall--globalgulp。如果已经全局安装了gulp,那么直接在项目根目录下:npminstallgulp--save-dev输入gulp-v显示版本说明安装成功安装browser-syncnpminstallbrowser-sync--save-dev配置gulpfilevargulp=require('gulp');varbrowserSync=require('browser-sync').create();//Staticservergulp.task('browser-sync',function(){varfiles=['**/*.html',//监听html'**/*.css',//监听css'**/*.js'//监听js];browserSync.init(files,{server:{baseDir:"./"}});});gulp.task('默认',['浏览器同步']);测试在项目根目录下打开命令行运行:如果上面没有报错,gulp会在浏览器中打开3000端口,然后输入对应的文件名.html就可以访问页面并刷新了即时的。例如有一个名为Homepage.html的文件,在浏览器地址栏输入http://localhost:3000/Homepage.html。