使用 Gulp 进行更改后,浏览器同步不会刷新页面

2024-01-12

我是 Gulp 的新手,我想利用它的自动 scss 编译和浏览器同步。但我无法让它发挥作用。

我剥离了所有内容,只留下 Browsersync 网站上示例的内容:

http://www.browsersync.io/docs/gulp/#gulp-sass-css http://www.browsersync.io/docs/gulp/#gulp-sass-css

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

我可以调用 gulp 服务。该网站正在显示,我收到一条来自 Browsersync 的消息。当我修改 HTML 时,页面会重新加载。然而,当我修改 scss 时,我可以看到:

[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms

但我必须手动重新加载。我缺少什么?


当我刚开始使用浏览器同步时,我也遇到了类似的问题,命令行说“重新加载浏览器”,但浏览器根本没有刷新,问题是我没有在 HTML 页面中包含 body 标记,其中browser-sync 可以为其功能注入脚本,确保您的 HTML 页面具有 body 标记。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Gulp 进行更改后,浏览器同步不会刷新页面 的相关文章

  • CSS 中的图像路径支持 CDN

    我正在尝试将我们的图像部署到 CDN 目前 CSS 具有我们网站上图像的相对路径 这些路径需要支持 CDN 图像位置 有人对我如何做到这一点有建议吗 或者是否有人有关于部署到 CDN 的好教程 这就是我最终完成此任务的方式 我用SASS h
  • Gulp: /usr/local/bin/gulp: 没有这样的文件或目录

    每当我运行 gulp 时 都会收到以下错误 usr local bin gulp 没有这样的文件或目录 我已经关注了 SO 上几个相关问题的答案 但没有一个能解决我的问题 我已经使用 gulp 几个月了 没有任何问题 但不知何故搞砸了 我已
  • 在 gulp 和 browsersync 问题中观看新文件

    我使用 browsersync 在文件更改时重新加载浏览器 而且它工作完美 但是当我创建新文件 例如 html scss js 时 bowsersync 不起作用 如何解决这个问题 gulpjs Browser Sync gulp task
  • Gulp Watch 只运行一次

    我正在使用这个 Gulp Watch 示例 https github com floatdrop gulp watch blob master docs readme md starting tasks on events https gi
  • Sublime Text 2 不保存构建的 SASS 文件

    我安装了Sublime Text 2 的 SASS 构建系统 https github com jaumefontal SASS Build SublimeText2正如自述文件中所述 一切都成功了 也是SASS安装 现在 如果我尝试构建
  • 如何在 Flexbox 中使用媒体查询控制每行的项目数?

    所以想象我有以下内容Markup div class container div class item div div class item div div class item div div class item div div cla
  • 如何更改 bootstrap 版本 4 按钮颜色

    我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色 但它也会影响所有其他组件 如何设置主按钮颜色而不影响主题颜色 我不想设置品牌为主并实现它 还有其他选择吗 Bootstrap 4 1 2019 年更新 现在 Boots
  • Gulp:如何自动替换 html 中的缩小文件? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在开发过程中 通常我会分别将很多第三方库导入到我的html中 如下所示
  • 通过 npm 节点自动化 Git 提交 + 版本控制 + 标记

    我一直试图得到的是 使用 npm version 来更新 package json 并创建一个标签 然后提交我的更改 通过这种方式 我将能够按版本添加标签 自动版本控制并提交信息 我遇到的问题是 当我使用 npm 版本时 它会自动执行标记
  • JavaScript 构建工具的目的是什么

    最近在学习Node js 这段时间 我听说了很多关于使用 Gulp 或 Grunt 作为构建工具的信息 现在我有兴趣学习如何使用 Gulp 我听说它是 一个构建工具 但我不确定它涵盖了什么 我会使用像 Gulp 这样可以帮助我进行开发的构建
  • 将参数从 mixin 传递到内容块

    This Sass 队列中的未决问题 https github com sass sass issues 871似乎意味着将参数传递给 content还不是一个功能 但是Susy 2 https github com ericam susy
  • 使用尾随与号 (&) 作为类组合选择器,而不是后代选择器

    我想申请一个班级 highlight到一堆不同的元素并根据元素类型设置它们的样式 我可以这样做 input type text highlight select highlight someOtherSelector hightlight
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 如何使用 Rails 4 和 Ruby 2.0 应用程序进行实时重新加载?

    如果我在 Rails 4 Ruby 2 0 项目的文本编辑器中编辑 scss 或 erb 文件 我希望在浏览器中看到实时更改 我尝试了 Guard 和 Guard live reload 但它抛出以下错误 22 58 04 ERROR Co
  • Compass/SASS - 并非所有文件都被编译

    我不知道是否可以在不粘贴所有文件的完整代码的情况下解释该问题 但我会尝试 编辑我已将整个代码添加到 Github 帐户 我的 Sass 结构 https github com mnabialek sass structure 我使用 Win
  • 如何让 gulp-typescript 输出到与源文件相同的目录?

    我有以下管道 function typescripts return gulp src paths watchedFiles ts pipe cached typescripts pipe plumber pipe addsrc paths
  • 为什么 npm install 失败并出现与 node-sass 相关的错误?

    我正在使用我继承的 Rails 应用程序 我正在尝试运行npm install命令但我不断收到errors以下 我尝试跑步npm rebuild node sass正如输出中所建议的 但它没有帮助 我遇到这个问题乌班图16也OS X gt
  • CSS 字体显示功能是什么?

    对于我的网站 我从 Google 的 PageSpeed Insights 获得以下反馈 利用字体显示 CSS 功能确保加载 Web 字体时文本对用户可见 这意味着什么 CSS font display允许您控制网络字体在加载时 加载后如何
  • 使用 SourceMaps 进行 Gulp 过滤器

    我有一个类似的问题here https stackoverflow com questions 26040358 gulp different pipe collections within same task coffeescript a
  • Rails:为什么我的所有 scss 文件都没有被编译?

    我是 Rails 的初学者 我认为我还不清楚如何组织样式表 目前 我的资产 样式表中有两个文件 应用程序 css home css 当我运行 rake assets precompile 我意识到只有 application css 被编译

随机推荐

  • 在 Linux 中禁用网络摄像头自动对焦

    我正在 beagleboard 的嵌入系统中工作 源代码是Python的 但我从OpenCV导入库来进行图像处理 实际上 我使用的是 Logitech c910 网络摄像头 它是一款出色的摄像头 但它具有自动对焦功能 我想知道是否可以从 P
  • FreeRTOS 匈牙利表示法 [重复]

    这个问题在这里已经有答案了 我是 RTOS 和 C 编程的新手 而且我仍在习惯 C 的良好实践 因此 我打开了一个使用 FreeRTOS 的项目 我注意到操作系统文件使用匈牙利表示法 我知道一点符号 但面临一些新的 标准 FreeRTOS
  • 在mongoDB的一个文档中插入多个json文件

    我有个问题 但是如何在一个文档集合中插入许多 json 文件呢 我有一个与 mongoDB 连接的 ruby 脚本 它为每个 ID 产品生成 json 文件 在 mongo 中我应该想要一个像这样的结构 Id document s name
  • 上传php时重命名图像文件

    我有一个用于上传图像的表格 index html 将数据提交到 resizer php 编码如下 索引 html
  • 如何将 dict_values 转换为集合

    我有一个dict包含集合作为每个键的值 例如 key1 8772 9605 key2 10867 10911 10917 key3 11749 11750 key4 14721 19755 21281 现在我想把每个值 即一组int变成一个
  • PHP 会话过期过早

    我遇到一个问题 我的应用程序会话在大约 15 分钟后意外过期 我需要它们在 4 小时后过期 服务器是Centos 5 5 PHP是5 3 2 下面是我的代码 包含在全局标头中
  • 图像大小应该在 img 标签高度/宽度属性中定义还是在 CSS 中定义? [复制]

    这个问题在这里已经有答案了 在中定义图像大小是否更好的编码实践img tag s width and height属性 img src images academia vs business png width 740 height 382
  • PHP MySQL 生成唯一的随机数

    我不明白为什么我的代码不起作用 连接工作正常 其他一切都正常 但是当我尝试生成一个唯一的随机数并从 MySQL 检查该数字是否存在时 它仍然打印出一个随机数 但它不是唯一的 有人可以帮助我吗 这是我的代码 num rand 1 5 sel
  • 如何正确克隆(jQuery)通过 PIE 应用样式的元素?

    我一直在使用 htc的版本PIE http css3pie com在一个新项目 专门针对 IE8 上成功 但是 在尝试克隆应用了 PIE 样式的元素时遇到了麻烦 我有一个 jsfiddle 说明了问题here http jsfiddle n
  • node.js:child_process.exec()的回调函数有没有办法返回进程PID

    Node JS 执行问题 我有一个生成多个进程的程序 我想通过在进程完成时捕获 PID 来记录进程完成的顺序 据我所知 标准回调不包括 PID stdout stderr 和错误 我想避免使用spawn 但看起来我必须这样做 除非任何善良的
  • mysql 连接。我应该在每次事务之前保持它的活动状态还是启动一个新连接?

    我正在第一次尝试 mysql 我对如何处理我的应用程序的连接有疑问 我现在正在做的是打开一个连接并保持它的活动状态 直到我终止我的程序 我时不时地执行一次 mysql ping 并使用 MYSQL OPT RECONNECT 启动连接 另一
  • 如何使用rails中的form_tag方法在params中传递参数

    我正在尝试传递一个参数params tab gt drive 在 car path 方法中使用 form tag 但它在 car path 参数中不可用 这就是我正在尝试的 有点不同的想法 使用 a 不是更好吗 隐藏字段 http api
  • 在这种情况下,“动态声明的字段”是什么意思?

    我对 OOP 和 PHP 还很陌生 我正在使用 IDE PhpStorm 它给了我这个 见下文 关于我参考的警告 width 这是我的代码 我以前从未见过 字段 一词 并且我不完全确定 动态声明字段 这句话的含义 看来这个警告是我今天更新
  • 面向对象设计中的方法

    Q1 在我大学的面向对象建模和设计研究中 他们建议思考对象可以为其方法做什么 以及它对其属性的责任是什么 所有澄清的尝试都导致了进一步的混乱 这往往会生成一个类图 其中包含具有所有操作的参与者和仅保存数据的内部类 这似乎不正确 是否有另一种
  • CFDocument 仍然会截断某些页面上的文本顶部

    当使用 cfdocument 时 我们的某些页面的顶行被切断 使其无法阅读 我知道 7 中有一个错误 据说在 8 中已修复 我们正在使用 8 0 1 195765 但问题仍然存在 我所有的搜索都将我引向 CF7 有人有主意吗
  • Chartjs 在饼图上显示值

    我正在使用 ChartJS 并尝试将数据对象中的数据数组的值添加到图表中 我的意思是 如果数据数组看起来像这样 1 4 5 则相关部分的饼图上将显示该值 因此 在本例中 最大的 饼图切片 应为数字 6 目前 仅当您将鼠标悬停在饼图上时 它才
  • 重载原始类型的运算符<<。那可能吗?

    嘿 是否可以为原始类型重载operator std ostream operator lt lt std ostream strm int i strm lt lt i lt lt std endl return strm 但它不起作用 我
  • 为现有类创建接口?

    I use a Model在屏幕上绘制一些系列 您可以创建一个系列 例如LineSeries or CurveSeries并将它们添加到模型中 Model Series Add myLineSeries 该系列有一个属性Points 其中保
  • PHP 真实路径总是返回 false

    我有一个问题 无论我如何传递文件路径字符串 PHP realpath 总是返回 false 默认情况下我通过这个realpath shop templates default css reset css 我也尝试过 http localho
  • 使用 Gulp 进行更改后,浏览器同步不会刷新页面

    我是 Gulp 的新手 我想利用它的自动 scss 编译和浏览器同步 但我无法让它发挥作用 我剥离了所有内容 只留下 Browsersync 网站上示例的内容 http www browsersync io docs gulp gulp s