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

保存后gulp如何自动刷新?看到这里就够了

时间:2023-04-03 17:19:42 Node.js

gulp已经使用gulp一段时间了。因为工作繁忙,一直沉浸在webpack搭建的项目中不能自拔。嘿。..说多了哭了,终于有时间了,可以加这个功能分享给大家,如果觉得不错,请点个赞,如果不错。...毕竟我入行时间不长。如果你没有gulp经验,你可以阅读我关于使用gulp工具的文章。我会用通俗易懂的语言解释一下保存gulp并自动刷新它需要什么?答:需要插件,需要gulp-connect插件,可以在npm上搜索插件的详细介绍(只要不嫌弃)。用我的话来说,这个东西就是你可以在本地启动一个服务,然后我们在源文件中保存代码的时候,浏览器会自动刷新,不用每次都切换到浏览器手动刷新,如果你是Dual陈列室的话,这个味道就叫爽字。上面的代码varconnect=require('gulp-connect');//首先需要在gukpfile.js中require这个插件,别忘了在项目中npminstall//gulp-connect插件的使用方法是这样的/**port如果是端口号的值*livereload为false,关闭实时更新*/gulp.task('connect',function(){connect.server({port:'3333',livereload:true});});gulp.任务('默认',['连接','观察']);//看到watch你应该能猜到,就是开启监控?那你错了。其实只是这么写还不算结束,因为你还没有告诉gulp你要在哪里执行这个刷新,比如gulp.task('scripts',function(){gulp.src([paths.src_js]).pipe(babel({presets:['es2015']})).pipe(gulp.dest(paths.dist_js))//输出到指定文件夹.pipe(connect.reload())//自动刷新.pipe(notify({message:'ScriptsisOK'}))//提醒要完成的任务)}/**例如*这是我的一个脚本任务,你一定要记得在任务处理完之后加上。pipe(connect.reload())*/你配置文件后,使用命令gulp就OK了。这将启动一个localhost:3333服务,这是当你进入你的编译文件目录时。例如localhost:3333/dist/index.html,当你修改样式文件或JS文件时,浏览器会实时刷新。这又是一个坑,就是这个实时刷新对于启动服务后新创建的文件是无效的。你怎么理解的?事实上,情况就是这样。例如,我现在有一个JS文件夹,里面只有一个index.js文件。然后我输入命令gulp来启动服务。启动服务后,我现在创建一个sub.js文件。现在这个sub.js文件修改后是不会编译的,除非你把当前的服务停了再重启。我也想解决这个问题,但是目前还没有很好的解决办法。如果有知道的高手也可以告诉我。谢谢你,兄弟!我的口才不是很好,不知道大家看懂没有。github的项目地址不要紧,我已经配置好了,在gulpfile里面写了很多注释。文件),如果有问题,可以发出