其实favicon.ico的请求也被nginx分配给php处理了，造成了程序执行两次的结果。
但是，Gulp目前拥有丰富的插件资源，开发人员可以根据项目的需求和个人偏好来配置使用这些插件，比如可以配置当修改了HTML文件浏览器自动刷新，也可以配置修改了CSS文件浏览器自动刷新。...今天的文章主要给大家分享Gulp插件的安装与使用: 浏览器自动刷新、CSS压缩、文件合并。...2 浏览器自动刷新 F5键对于网页开发工程师来说再熟悉不过了，也是使用频率超高的一个键。网页开发工程师使用F5键的目的是及时预览当前网页开发的效果，方便他们对网页进行调试与修改。...但是，在开发的过程中我们是希望当我们对网页文件（包括HTML、CSS、JS、LESS文件等）做了修改，浏览器能够自动刷新网页。...这样的好处在于每次修改代码后，开发工程师不用去按F5键或移动鼠标到浏览器选中刷新查看效果，节省了大量重复性的操作时间，进一步提高了开发效率。
原来用的React+Webpack时，那种同步压缩修改、实时动态刷新页面的感觉真的太棒了。...但如果使用Express+ejs+less的话，配置webpack非常繁琐，所以，一番折腾后，于是有了Express+Less+Gulp的配置方案，效果见下图，项目地址：https://github.com...监听所有图片档 gulp.watch('public/img/**/*', ['img']); // 监听ejs gulp.watch('views/**/*.ejs', ['ejs...']); // 创建实时调整服务器 -- 在项目中未使用注释掉 var server = livereload(); // 监听 dist/ 目录下所有文档，有更新时强制浏览器刷新（需要浏览器插件配合或按前文介绍在页面增加...error: {} }); }); module.exports = app; 然后先在根目录下执行安装： npm install，使用时先运行gulp build将文件压缩、打包、编译，然后再执行
Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。...greet任务，然后在它结束后再调用你定义的函数。...你可以保存LESS文件，接着Gulp会自动把它转换为CSS文件并更新浏览器。...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。...使用LiveReload的话，你就需要在每次改变代码之后还需要点击四次，而当你修改CSS时，插入一些变化时，BrowserSync会直接将需要修改的地方添加进CSS，就不用再点击回退。 ?
文件 google国内被墙了，可以通过国内镜像网站下载 二、livereload(支持css，sass，less，html，js，图片等) 本质是监控文件修改，实时刷新浏览器...sudo npm install -g livereload 在文件加下启动livereload livereload ctrl+s保存后实时刷新 结合gulp，实现刷新：...var livereload = require("gulp-livereload"); gulp.task('watch',function(){ livereload.listen(); gulp.watch...，只需安装node.js插件，局部刷新，可以实现手机浏览器和PC浏览器多个同步，包括视图同步和交互同步 安装node.js和插件： npm install -g browser-sync...v1.24.0 打开atom的package install页面 查找安装emmet，时间有点长 如果碰到这个报错，一般是编译用的python没有安装 安装完这个后再安装
isDevelopment) { require('electron-reload')(path.join(__dirname, "build")); } 这个插件跟上面的区别在于我们可以指定自动刷新所监听的文件夹.../main.js'], function (done){ electron.restart(); done(); }); gulp.watch(['....运行 使用npm run hot即可运行项目 npm run hot 经测试 修改主进程文件，会自动重启窗体； 修改HTML/CSS文件，会自动刷新页面； gulp+electron-reload...\\gulp watch:electron", }, 运行项目 npm run start npm run hot 我们分别运行项目的启动和自动webpack的脚本 这样的好处 需要热加载的时候我们再启动...不同逐个添加要更新的窗口 当然我们也可以在gulp中启动electron，可以使用electron-connect或自己实现 自己实现的效果不是特别好，比如显示的log会在弹出的命令框中，停止项目，窗口依旧不会关闭
什么是 gulp gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。...但是如果某个任务所依赖的任务是异步的，就要注意了，gulp 并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。...是一个异步执行的任务 setTimeout(function(){ console.log("one is done"); },3000); }); //two任务虽然依赖于one任务，但并不会等到...two 任务时，会先执行 one 任务，但不会去等待 one 任务中的异步操作完成后再执行 two 任务，而是紧接着执行 two 任务。...gulp-coffee ： 编译CoffeeScript gulp-mocha ： 执行Mocha测试 gulp-bump ： 更新版本号 gulp-sass ： sass 编译 browser-sync ： 浏览器自动刷新
然后以全局方式安装gulp： npm install -g gulp 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。...但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。...是一个异步执行的任务 setTimeout(function(){ console.log('one is done') },5000); }); //two任务虽然依赖于one任务,但并不会等到...任务时，会先执行one任务，但不会去等待one任务中的异步操作完成后再执行two任务，而是紧接着执行two任务。...当代码变化时，它可以帮我们自动刷新页面 该插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。
Gulp 是基于 NodeJS 的前端自动化构建工具，在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务...，在操作上使用了 NodeJS 中的 stream (流)，通过 pipe() 方法导入到指定的地方，将前一级的输出，作为后一级的输入，不再需要进行频繁的 IO 操作，但需要注意的是，这里的流内容，并非原始的文件流...，查看当前目录已安装插件 npm listnpm 安装插件是从国外服务器下载，受网络影响大，对不能访问外国网站的同学不太友好，而淘宝团队提供了一个 npmjs.org 镜像，同步频率目前为 10 分钟一次...文件目录结构如下所示在实际开发过程中，我们定义了多个类似 less 的任务，以实现不同的需求，当任务有多个，为实现某一需求而运行所有任务显然是不可取的，我们可通过 gulp + 任务名的方式来运行指定的任务，而不会触发其他任务除了我们定义的...任务外，我们还定义了一个 default 默认任务，这对 Gulp 来说是必须的，当我们输入 gulp 命令时，将会自动执行 default 任务，在上面这个例子中，我们先是执行了 less 任务，再执行了
js/main.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')) .pipe(browserSync.stream());}// 监视并刷新任务...gulp.task('watch', () => { browserSync.init({ server: { baseDir: './' } }); gulp.watch(...'index.html', gulp.series("html")); gulp.watch('css/main.css', gulp.series("css")); gulp.watch('js/...ihU7zmQxVncDAx8ppTCeTTAs0pnLlR4t8Q/Nmd5-Mg" crossorigin="anonymous">运行 Gulp在 my-project 文件夹中打开终端，运行以下命令启动 Gulp：gulp此时，浏览器会自动打开
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新...然后以全局方式安装gulp： npm install -g gulp 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。...gulp的使用流程一般是：首先通过gulp.src()方法获取到想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest(...注意：插件可能并不会实现对 stream 的支持。...options.read 类型： Boolean 默认值： true 如果该项被设置为 false， 那么 file.contents 会返回空值（null），也就是并不会去读取文件。
npm install 或者一个一个地安装，依赖项会自动建立。...这个watch是一个监听的任务，下头会讲到 然后gulp.start 再执行上述的那两个任务。...这样一来，命令行直接gulp就能执行这仨任务了，还能实时监听改变哦~ 这个watch的监听任务： gulp.task('watch',function(){ gulp.watch('..../static/style/test.scss',['styles']); livereload.listen(); gulp.watch('.... 第四行是监听某个css文件，比如我html文件引用了这个文件，它变化时浏览器就会自动刷新。
而随着前端技术的大爆炸来临，我们需要赶上这一次潮流，加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。...有一点需要注意的地方，gulp-ruby-sass需要有ruby语言环境，这是安装传送门Ruby，一般Mac会自带Ruby。.../dist/**/*.*'], ['rebuild']) gulp.watch(['./source/**/*.html'], ['extend']) gulp.watch(['..../source/**/*.scss'], ['styles']) gulp.watch(['./source/**/*.js'], ['js']) gulp.watch(['....，便于SEO watch监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼
()上实现了自动编译（即修改sass文件后保存，则立即执行sass预处理），配合Gulp启动的server则可以实现sass文件修改保存即可在浏览器中查看效果的目的，下一小节会介绍启动本地server。...在Gulp中启动本地服务有一个很方便的配置，就是``livereload:true``属性的设置，设置后浏览器会根据你项目中资源的变化自动刷新浏览器（如果你的chrome浏览器设置该属性后在你修改文件并保存时仍没有自动刷新...但是，这个功能是需要结合上一小节中的``gulp.watch()``实时监控文件变化，然后执行合并压缩和sass/less编译等操作后，浏览器再刷新时才能保证是我们修改后的内容。...所以，``livereload:true``属性只是监控到我们修改文件后刷新浏览器重新请求文件，如果我们不重新编译修改后的文件，浏览器获取到的还是原文件，并不会展示变化。...而且，如果需要的话，还能自动刷新浏览器，重新加载资源。
不会吧，不会吧，现在都2020年了不会还真人有人不知道JS的rAF吧？？？...这也是rAF的最大优势–它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘，从而避免setTimeout通过时间定义动画频率，与屏幕刷新频率不一致导致的丢帧。...request 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成（这点很像虚拟DOM不是~），并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,这样就不会出现过度渲染的问题，保证了流畅的需求以及浏览器的完美渲染...所以事实是浏览器可以“强制规定时间间隔的下限（clamping th timeout interval）”,一般浏览器所允许的时间再5-10毫秒，也就是说即使你给了某个小于10的数，可能也要等待10毫秒...「使浏览器画面的重绘和回流与显示器的刷新频率同步」它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘，从而避免setTimeout通过时间定义动画频率，与屏幕刷新频率不一致导致的丢帧。
2.2 方式二 每次请求 token 都进行一次刷新 token 设置一个过期时间 token 过期后无法再刷新 token 没必要设置刷新时间了 web 假设一个 token 的签发时间为 12:00...其次，每次刷新都要把旧 token 加入黑名单，会导致黑名单特别大，远远比方式一的设置刷新期大。 每次都刷新 token，并发请求时会不会因为 token 刷新而导致只有一个请求成功？...但是这样还要考虑一个问题：就是一个用户开两个浏览器，在不同的时刻在同一个系统都登陆了（假设业务允许），那么一个浏览器的 token 刷新就可能会导致另一个浏览器登陆失效。...比如，A 系统（假设 2h 过期时间，14 天刷新时间），你用一个浏览器登陆了你的账号，我用 Chrome 浏览器登陆了我的账号，然后我又用 QQ 浏览器再登陆我的账号，那么黑名单的大小就为 ：1 +...QQ 浏览器请求的次数 z 之和，即：x + y + z 2.4 总结 如果要解决续签问题，方式一【可以一直续签】是个比较好的解决方案，虽然会带来一点小问题，但是并不会有太大的影响。
必须注意一个问题，每次刷新请求需要从服务器读取数据，不能从缓存读取返回数据。否则网站根本不知道你在刷新，刷新请求到不了服务器。有哪些缓存会影响到刷新呢？...2、 同一IP访问一天内只计算一次流量 这需要换IP刷新，每刷新一次换一次IP。 突破：批量自动换IP。...5、 网站通过Session限制用户刷流量行为（这种形式比较少见，因占用服务器资源） 我们每次打开浏览器访问网站时，会建立浏览器与网站服务器之间的会话（Session）。...只要不关闭浏览器，那么这个Session从你最后一次向服务器发出请求算起，一般可保持20分钟。 突破：方法很简单，就是关闭浏览器再重新打开浏览器刷新。...8、 网站需要登录访问才计算流量，一个帐号多次访问只计算一次 比如某社交网站有点赞功能，但每个帐号只能点赞一次，再多点就无效了。 突破：批量自动注册多个帐号，批量自动登录点赞。
__proto__); 就这段代码而言，第一次运行后打开 Chrome 的 DevTools，会发现打印出来的结果是： ? 而如果在此基础上刷新浏览器，会发现打印的结果变成了这样： ?...我尝试将代码改为简单的 console.log({a:1})后，依然会发生同样的情况 —— 即第一次只打印 Object，刷新之后才打印 {a:1}。第二个是：是否和浏览器相关？...简单地说，这个行为的差异不是由于刷新浏览器导致的，而是由于打开 DevTools 导致的。...我们在第一次运行代码之后，对象就打印出来了，但此时还没有打开 DevTools，所以这部分打印的内容是暂时放在内存的缓冲区（buffer）中的。...当然不排除还有其它方面的考虑，具体的我就没有再深挖啦，毕竟咱也不是开发浏览器的，了解一下，知道有这么一个东西就好了。关键的是，这次的疑惑得到了一个比较官方而准确的解答，我认为这才是最大的收获。
另外我们还需注意一点：由于浏览器的内部实现原理，当页面切换或者自身刷新时，浏览器是等到新的页面完成渲染之后再销毁旧的页面。...道理是对，但突然的更新会打断用户的操作，可能会引发不适。...用户刚开始浏览内容或者填写信息就遇上了莫名的刷新，可能会砸键盘。...我们简单理一下逻辑，其实也不复杂： 刷新不能使得 SW 发生更新，即老的 SW 不会退出，新的 SW 也不会激活。 这个方法是通过 skipWaiting 迫使 SW 新老交替。...但毫无征兆的刷新页面的确不可接受，所以我们再改进一下，给用户一个提示，让他来点击后更新 SW，并引发刷新，岂不美哉？
HTTP 缓存是前端面试必问的知识点，大多数前端也都能答出强缓存和协商缓存来，但如果换个问法呢？ 比如问浏览器的强制刷新实现原理是什么？ 你还能答出来么？...这样第一次访问把资源下载下来之后，再次访问就只有 html 会发请求了： 这里 memory cache 和 disk cache 不用做啥区分，只是刚开始是存在内存里的，关闭浏览器再打开就变成从磁盘加载的了...这时候就可以清空本地强缓存再刷新了，也就是这个选项的意思。...总结 网站的缓存设置的最佳实践是入口 html 文件 Cache-Control 设置 no-cache，其他文件 max-age，这样入口文件会用本地缓存但每次都协商，能及时更新，而其他资源不会发请求...如果要更新的话，html 文件协商后发现有更新会下载新 html，这时候关联了其他 hash 的文件，浏览器会下载新的，不会走到之前文件的缓存。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
