开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

吞咽监视任务的问题。从PUG编译index.html后，Gulp watch任务不会刷新浏览器

吞咽监视任务的问题是指在使用PUG编译index.html后，Gulp watch任务无法自动刷新浏览器的情况。这个问题通常出现在前端开发中，使用Gulp作为构建工具来编译和监视文件变化。

解决这个问题的方法有以下几个步骤：

确保Gulp watch任务已正确配置：首先，确保Gulp watch任务已正确配置，包括正确的文件路径和任务设置。检查Gulpfile.js文件中的watch任务代码，确保它监视了正确的文件，并在文件变化时执行正确的操作。
检查浏览器自动刷新插件：Gulp watch任务通常会结合浏览器自动刷新插件来实现自动刷新功能。确保你已安装并正确配置了适用于你所使用的浏览器的自动刷新插件。常见的浏览器自动刷新插件有BrowserSync、LiveReload等。
确保浏览器连接正常：有时候，浏览器与Gulp watch任务之间的连接可能会出现问题，导致自动刷新无法正常工作。检查你的网络连接，确保浏览器可以正常访问Gulp watch任务所在的服务器。
检查文件变化事件：如果以上步骤都没有解决问题，可以检查一下文件变化事件是否被正确地捕获和处理。在Gulp watch任务中，确保文件变化事件被正确地触发，并执行了刷新浏览器的操作。

如果以上步骤都没有解决问题，可以尝试以下方法：

重新安装相关插件：尝试重新安装Gulp和浏览器自动刷新插件，确保它们的版本兼容性和正确安装。
清除缓存：有时候，浏览器缓存可能会导致自动刷新无效。尝试清除浏览器缓存并重新加载页面。
使用其他工具：如果问题仍然存在，可以尝试使用其他类似的构建工具或自动刷新插件来替代Gulp watch任务。

腾讯云相关产品推荐：

云服务器（CVM）：提供弹性、安全、稳定的云服务器实例，适用于各种应用场景。产品介绍链接：https://cloud.tencent.com/product/cvm
云函数（SCF）：无需管理服务器，按需运行代码的事件驱动型计算服务。产品介绍链接：https://cloud.tencent.com/product/scf
云存储（COS）：提供高可靠、低成本的对象存储服务，适用于海量数据存储和访问。产品介绍链接：https://cloud.tencent.com/product/cos

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

给初学者的Gulp教程（译）

它经常用来进行一些前端任务，比如：生成一个Web服务器当一个文件保存时，浏览器自动刷新编译像Sass或者LESS一样的预处理器优化资源文件，像CSS,JavaScript和图片等这些并不是Gulp...现在让我们继续向前，以及学习如何使用Gulp配置一个工作流我们要配置什么在看完这篇文章后，你将拥有一个工作流，来进行我们文章开始所说的一些任务：生成一个Web服务器当一个文件保存时，浏览器自动刷新...当两个任务都完成后，watch将会运行。 ? bs-watch.png 同时，一个显示app/index.html文件的浏览器窗口也将突然弹出。...2.使用Sass编译器 3.当文件改变后，自动重新加载浏览器 让我们进入下一届，讨论优化资源文件的部分。...第一个任务集是一个开发进程，我们可以用它编译Sass到CSS，监视文件的修改，从而重新加载浏览器。第二个任务集是压缩进程，我们为生产网站准备了所有文件。

4.3K2 0

gulp 实现纯html、css、bootstrap 的打包

());}// 监视并刷新任务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/main.js', gulp.series("js"));});// 默认任务gulp.task('default', gulp.series('html', 'css'...在 my-project 文件夹中打开终端，运行以下命令启动 Gulp：gulp此时，浏览器会自动打开 http://localhost:3000/ 并显示您的 index.html 文件。...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。

4672 0

前端工程化篇之 Gulp

我们使用gulp需要用到的包一个TASK任务，对应一个包，对应一个处理逻辑、 gulp.series对应的是同步任务，从左到右，依次执行任务。...gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = require...('dist')); }); // 自动化 --> 自动编译 --> 自动刷新浏览器（热更新） --> 自动打开浏览器 gulp.task('watch', function() { livereload.listen...open('http://localhost:3000'); // 监视指定文件，一旦文件发生变化，就执行后面的任务 gulp.watch('src/less/*.less', gulp.series...('less')); gulp.watch('src/js/*.js', gulp.series('js-dev')); }); // 配置默认任务 --> 执行以上多个任务 gulp.task(

1.3K1 0

10分钟学会前端工程化（webpack5.0）

(5)、自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。 (6)、代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。...I/O 操作也是个弊病，它的每一次任务都需要从磁盘中读取文件，处理完后再写入到磁盘，例如：我想对多个 less 进行预编译、压缩操作，那么 Grunt 的操作就是：读取 less 文件 -> 编译成...1.2.2、Gulp Gulp（ɡʌlp狼吞虎咽地吃，吞咽）是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。...Gulp 被设计得非常简单，只通过下面5种个方法就可以胜任几乎所有构建场景：通过 gulp.task 注册一个任务；通过 gulp.run 执行任务；通过 gulp.watch 监听文件变化；通过...，Gulp 的流程就是：读取 less 文件 -> 编译成 css -> 压缩处理 -> 存储到磁盘 Gulp 作为任务类型的工具没有明显的缺点，唯一的问题可能就是完成相同的任务它需要写的代码更多一些

2.6K1 0

gulp 详解与使用

什么是 gulp gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。...done"); },3000); }); //two任务虽然依赖于one任务，但并不会等到one任务中的异步操作完成后再执行 gulp.task("two", ["one"], function(...gulp.watch() gulp.watch() 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。...其语法为： gulp.watch(glob[, opts], tasks); glob 为要监视的文件匹配模式，规则和用法与 gulp.src() 方法中的 glob 相同。...gulp-sass ： sass 编译 browser-sync ： 浏览器自动刷新 gulp-uglify ：代码压缩 gulp-concat ：合并 gulp-eslint ：支持 ES6

1.1K1 0

使用Gulp

目录下的index.html文件拷贝到dist目录下 gulp copy 文件拷贝命令执行完成后可以看到在code目录下自动创建了一个dist文件夹，并且在dist文件夹下自动创建了一个index.html...拷贝到dist目录中 .pipe(gulp.dest('dist/')); }); //监视copy任务 gulp.task('dist', function() { //当src目录下的...index.html文件发生变化的时候 //执行copy任务 gulp.watch('src/index.html', ['copy']); }); 6.修改好gulpfile.js中的代码后在命令行中执行下面的命令...gulp dist 6.此时只要修改src文件夹的index.html文件,修改完成后只要一保存，HTML代码就能同时同步到dist文件夹下的index.html中使用Gulp自动将Less编译成...) .pipe(gulp.dest('css/')); }); //监视less任务 //当less文件发生变化的时候，会自动将Less转换成CSS gulp.task('watchLess'

5593 0

Gulp和Webpack对比

console.log('所有任务队列执行完毕'); }); ``` 这样，一个简单的sass预处理的task就配置完成了，然后我们还将该task加到gulp.watch()上实现了自动编译（即修改...在Gulp中启动本地服务有一个很方便的配置，就是``livereload:true``属性的设置，设置后浏览器会根据你项目中资源的变化自动刷新浏览器（如果你的chrome浏览器设置该属性后在你修改文件并保存时仍没有自动刷新...但是，这个功能是需要结合上一小节中的``gulp.watch()``实时监控文件变化，然后执行合并压缩和sass/less编译等操作后，浏览器再刷新时才能保证是我们修改后的内容。...所以，``livereload:true``属性只是监控到我们修改文件后刷新浏览器重新请求文件，如果我们不重新编译修改后的文件，浏览器获取到的还是原文件，并不会展示变化。...}，2.刷新浏览器请求最新编译后的文件**）和热替换(HMR)；而**gulp-server**虽然提供了启动本地server的能力和仅自动刷新浏览器的能力，缺少一个文件自动编译的能力，这需要借助其他模块实现

2.1K4 0

Gulp开发教程（翻译）

Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。...当只有一个任务的时候，函数并不会起太大的作用。...CSS here }); 现在，当执行css任务时，Gulp会先执行greet任务，然后在它结束后再调用你定义的函数。...换句话说，如果你在执行任务时只需要两个插件，那么其他不相关的插件就不会被加载。 WATCHING FILES Gulp可以监听文件的修改动态，然后在文件被改动的时候执行一个或多个任务。...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。

8474 0

放弃webpack,拥抱gulp

搭建一个简单的前端应用相比较webpack，其实gulp的项目结构更偏向传统的应用，只是我们借助gulp工具解放我们的一些代码压缩、es6编译、打包以及在传统项目中都可以使用less体验。...申明的变量就变成了es5了通常情况下，一般打包后的dist下的css或者js都会被压缩,在gulp中也是需要借助插件来完成压缩js与css 压缩js ... const teser = require...中，任务之间的依赖关系需要我们自己手动写一些执行任务流，现在一些打包后的dist的文件并不会自动注入html中。...，再注入，所以在series任务的最后才执行injectHtml操作并且在public/index.html下，还需要加入一段注释 <!...://localhost:8081 我们使用了一个watch监听public目录下的所有文件，如果文件有变化时，会执行taskBuild任务会在dist目录下生成对应的文件，然后会启动一个本地服务，打开一个

8901 0

前端页面可视化开发-livestyle,livereload,browser-sync

sudo npm install -g livereload 在文件加下启动livereload livereload ctrl+s保存后实时刷新结合gulp，实现刷新：...执行“watch”脚本 gulp watch 修改文件后，报错 file参数名称修改正确，重启命令 html修改正确可以参考github上的主页...，时间有点长如果碰到这个报错，一般是编译用的python没有安装安装完这个后再安装emmet即可安装好后就能看到emmet插件继续安装livestyle插件...解决方法：先把外链css注释掉，或者换成本地文件情况2：插件默认寻找的是index.html，如果调用页面名字不是这个的话，会出现文件目录解决方法：将当前需要修改的页面改成index.html...使用命令+谷歌浏览器：在文件目录下 http-server 2.livereload使用命令+V**代理+谷歌浏览器：在文件目录下 livereload gulp watch

1K2 0

Gulp 在金蝶云平台项目中的使用经验

刚开始想实现浏览器 F5 自动刷新使用到的是 grunt 和 livereload 插件，gulp 也有对应的方法，参考 gulp 教程之 gulp-livereload。...但是，它需要浏览器安装 livereload 插件才能使用，chrome 的插件需要访问外国网站下载，firefox 的插件不起作用，其它的浏览器也无法实现自动刷新。...如果想多个浏览器都可以自动刷新，只需要打开其它浏览器，把刚刚的链接输入即可。...在使用了 Grunt 的一段时间后，我发现了 gulp 的运行速度比 Grunt 快很多，于是便从 Grunt 转移阵地到了 gulp。以下的构建思路跟 Grunt 的构建很类似。...# js 语法检测 $ gulp include # html 包含依赖编译 $ gulp dev # 开发监控，浏览器不自动刷新 $ gulp serve

1.7K0 0

Gulp使用指南

gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新...gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。...3.watch gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。...其语法为 gulp.watch(glob[, opts], tasks); glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。...opts 为一个可选的配置对象，通常不需要用到。 tasks 为文件变化后要执行的任务，为一个数组。

1.2K6 0

我的前端工作流

下面是我对gulp任务，使用CoffeeScript，然后我会讲解一个任务。...', 'watch'] styles任务，会将scss目录下的样式文件编译成css，然后autoprefixer方法会自动添加不同浏览器的前缀，concat合并成一个文件style.css后会使用minifycss.../dist/css/') extend任务会将模版文件解析并生成相应的html js压缩js image对图片资源进行无损压缩 clean清空编译目录 sitemap生成站点地图，便于SEO watch...监听文件，当发生改动时调用相应的任务 build用于构建编译文件 default默认任务，使用gulp命令执行的任务 browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild...当资源文件更新时让browser-sync重新加载变更完成这些之后，可以使用gulp + 任务名称执行相应的任务结束语这是我的前端工作流，构建静态页面速度是不是一下子就提升了呢。

6031 0

用 npm scripts 来构建前端项目的尝试

最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后，觉的这文章写的相当不错，就决定尝试下。下面先简单介绍下 npm Scripts。...npm Scripts 是用定义来一些任务的。我们在命令行中执行 npm run 任务名，即可执行这个命令。...用静态服务器不会产生这个问题。监视 Sass 文件的变化。变化时，编译生成 CSS 以及 sourcemap。用 Compass。监视 ES6 文件的变化。...start:server watch:sass watch:es6", "watch:sass": "compass watch",// 监视 Sass 文件的变化 "watch:es6": "...node_modules/.bin/webpack --watch -d",// 监视 ES6 文件的变化 "start:server": "node_modules/.bin/anywhere 1520

1.4K2 0

从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？

如果在编辑器中对html文件增加或删除了元素，或者是在css文件中修改了某个元素的某个样式，然后想在浏览器中看到效果，通常的步骤是：把窗口切换到浏览器，然后按键盘上的F5刷新页面。...所以gulp解决了开发效率(修改代码后自动更新页面)、资源整合(代码的压缩合并)、代码质量(代码的检查自动化测试)、代码转换(es6-->es5)等问题这里，我们需要知道gulp是怎样创建任务的。...在找它之前，我也找到其他可以实现自动刷新浏览器的插件，如：LiveReload，它也可以自动刷新页面，实时预览html效果。但是，我为什么没用LiveReload呢？...默认情况下,浏览器和编辑器并不会自动为你激活LiveReload的功能，你需要手动配置一些东西。所以这么麻烦，干脆看看还有没有别的解决方案。...这里需要注意的是，如果是修改了服务端的js文件，会先通过nodemon重启应用，这时浏览器不会刷新，要再保存一下修改的文件，browser-sync才会显示出修改后的效果。

5952 0

前端工程化 | 定制专属提速“外挂”（上）

但是，Gulp目前拥有丰富的插件资源，开发人员可以根据项目的需求和个人偏好来配置使用这些插件，比如可以配置当修改了HTML文件浏览器自动刷新，也可以配置修改了CSS文件浏览器自动刷新。...今天的文章主要给大家分享Gulp插件的安装与使用: 浏览器自动刷新、CSS压缩、文件合并。...本文内容概要 1 为何不用npm，而选用cnpm 2 浏览器自动刷新 3 文件合并 4 CSS文件压缩 1 为何不用npm，而选用cnpm 原因：因为npm安装插件是从境外服务器下载，在境内受网络影响很大...这样的好处在于每次修改代码后，开发工程师不用去按F5键或移动鼠标到浏览器选中刷新查看效果，节省了大量重复性的操作时间，进一步提高了开发效率。...; var concat = require('gulp-concat'); // 定义一个f5任务，名称自定义即可 // 浏览器自动刷新 gulp.task('f5', function(){

1K5 0

gulp

--save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello',.../index.html').pipe(gulp.dest('....'); }); 监听任务 gulp.task('watch', function () { gulp.watch('a/*',['hello']); }); 使用插件来扩展gulp的功能 Sass...connect.server({ root:'dist' }); }); 浏览器实时刷新 npm install gulp gulp-livereload --save-dev 在server...服务中添加livereload:true（启动实时刷新的功能）在要实现刷新的文件中添加.pipe(connect.reload()) 合并文件 npm install gulp-concat --

1K1 0

前端构建工具gulpjs的使用介绍及技巧

') },5000); }); //two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行 gulp.task('two',['one'],function(){ console.log...('two is done'); }); 上面的例子中我们执行two任务时，会先执行one任务，但不会去等待one任务中的异步操作完成后再执行two任务，而是紧接着执行two任务。...3.4 gulp.watch() gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。...其语法为 gulp.watch(glob[, opts], tasks) glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。...当代码变化时，它可以帮我们自动刷新页面该插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。

1.8K3 0

JGulp: 利用Gulp 配置的前端项目自动化工作流

引子在苦苦构思了上面的开头后，从“效率”这个词Jeff 引出了今天话题——也就是标题说的前端项目自动化工作流。...，依次新建images、css、js等文件夹分别放对应的静态文件，新建index.html 开始码HTML+CSS+JS 代码，改动一下按一下F5(或CTRL+R)刷新浏览器。...然后偶然看到一篇《Gulp的目标是取代Grunt》的檄文，看完后俺义无反顾投入了Gulp 的怀抱。在花了一个小时多了解了Gulp 并看明白配置的写法后，那个风平浪静的下午，我久久不能抑制住内心的激动。...文件清理功能（gulp-clean）在项目完成可以删除一些多余的文件任务错误中断自动重传（gulp-plumber）好吧，“任务错误中断自动重传”是我瞎命名的。...默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。

1.1K10 0

Gulp基本使用

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。...sourcemap保留了之前编译的代码使代码容易调试，当出错时浏览器会通过sorcemap恢复源代码并定位错误 cnpm i gulp-sourcemaps -D const gulp = require...(build,hello) 某js文件 alert("0134256u6i") Datw.style.backgroundColor='red' 我们的代码并没有Text元素，但打包时不会报错当html...引入打包后的js文件时图片图片直接定位了错误信息，方便调试不过使用这个功能必须打开谷歌浏览器的Enable Javascript source maps 图片 css cnpm i...* sourcemap 保留了之前编译的代码使代码容易调试 * 出错，浏览器通过sorcemap恢复源代码 * cnpm i gulp-sourcemaps -D\ * gulp-watch

9491 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭