gulp + 浏览器同步无法获取/错误

2024-05-04

我正在学习当前的前端构建系统,我想使用浏览器同步,问题是它不会在命令行中抛出错误,而是当它启动浏览器时,它不会显示我的html文件,并且它会在浏览器窗口中显示“无法获取/”错误。这是我的 gulpfile.js 代码

var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   compass= require('gulp-compass'),
   plumber = require('gulp-plumber'),
   autoprefixer = require('gulp-autoprefixer'),
   browserSync = require('browser-sync'),
   reload = browserSync.reload,
   rename = require('gulp-rename');


gulp.task('scripts', function() {
   gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js'])
      .pipe(plumber())
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('public/src/js/'));
});

gulp.task('styles', function() {
   gulp.src('public/src/scss/main.scss')
      .pipe(plumber())
      .pipe(compass({
          config_file: './config.rb',
          css: './public/src/css/',
          sass: './public/src/scss/'
      }))
     .pipe(autoprefixer('last 2 versions'))
     .pipe(gulp.dest('public/src/css/'))
     .pipe(reload({stream:true}));
});


gulp.task('html', function() {
  gulp.src('public/**/*.html');
});  

gulp.task('browser-sync', function() {
    browserSync({
      server: {
         baseDir: "./public/"
      }
   });
});

gulp.task('watch', function() {
   gulp.watch('public/src/js/**/*.js', ['scripts']);
   gulp.watch('public/src/scss/**/*.scss', ['styles']);
   gulp.watch('public/**/*.html', ['html']);
});

gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']);

我正在使用 Windows 和 git bash,版本是"browser-sync": "^2.12.5"那么问题是什么并尝试为我解释以便从中得到一些东西。


有没有一个index.html文件在你的./public/文件夹?如果没有,您需要告诉 browserSync 您的起始页是什么。您还可以让 browserSync 显示基本目录的列表,请参阅下面的更新。

您也可以尝试使用public没有前导点。

Edit:startPath 配置指令似乎不起作用,请使用index instead

...
gulp.task('browser-sync', function() {
   browserSync({
     server: {
        baseDir: "public/",
        index: "my-start-page.html"
     }
   });
});
...

Update:实际上您可以使用 browserSync 获取目录列表。这样它就会显示文件列表public,而不是无法获取错误

...
gulp.task('browser-sync', function() {
   browserSync({
     server: {
        baseDir: "public/",
        directory: true
     }
   });
});
...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

gulp + 浏览器同步无法获取/错误 的相关文章

随机推荐

  • 如何修复 GitHub 拉取请求中被 git rebase 破坏的提交顺序?

    当我编写代码时 我会将其分解为小的逻辑更改 以便轻松快速地进行审查 为此 我使用git rebase i 交互式 压缩 删除和更改提交的顺序 我注意到这有时会导致 GitHub 拉取请求的提交顺序不同 尽管该顺序保留在远程分支上 例如 co
  • 这是一个不正确的警告吗?

    让我们看看我经常看到的这个代码模式 struct Foo template
  • 使用 sh shell 比较字符串

    我正在使用 SH shell 我试图将字符串与变量的值进行比较 但是if条件始终执行为真 为什么 这是一些代码 Sourcesystem ABC if Sourcesystem eq XYZ then echo Sourcesystem M
  • 将 CSS 导入 HTML 不起作用

    我正在尝试将 CSS 文件 import 导入 HTML 但它不起作用 我确实尝试过链接路径 但它也不起作用 但这种格式似乎工作为 http U5 L ttJS http 127 0 0 1 54149 assets pages U5 JS
  • C++:从同一类的成员函数调用纯虚函数

    考虑以下 2 个程序 include
  • 在实体框架中使用 Asp.net Identity 抛出无法从程序集“EntityFramework,版本=6.0”加载类型“.Schema.IndexAttribute”

    public EmployeeDTO AuthenticateEmployee string username string password try var userLogin UnitOfWork UserLoginRepository
  • 将 PhotoSwipe 配置为不使用整个窗口?

    我目前正在尝试使用构建移动图片库照片滑动 http photoswipe com 我已经能够让它工作了 但有一个小问题 当我 单击照片缩略图 实际照片总是占据整个 视口 当您在移动设备上查看图库时 这是可以的 但是 如果您的视口是计算机屏幕
  • 托管 C++ 引用类

    任何好的网站或解释什么是ref class何时将一个类声明为 引用类 msdn上的解释对我来说还不够 基本类型 可选 一个基础类型 引用类或引用结构可以继承零个或多个托管接口以及零个或一个引用类型 值类或值结构只能从零个或多个托管接口继承
  • git 克隆密码存储或缓存在哪里?

    环境定义 使用Windows 10操作系统 我使用 githttps git scm com https git scm com 和 Github 的 Git Shell 背景 当我发出如下所示的 git clone 命令时 git clo
  • Prism 6 与旧版本的兼容性

    我有一个使用 Prism 5 WPF 的主项目的解决方案 该解决方案还包含更多属于 Prism 模块的项目 现在我必须创建一个新模块 我想知道我是否只能在该模块中使用 Prism 6 并且它将与 Prism 5 主项目兼容 或者我是否需要在
  • 在 Python 中读取 .docx 文件以查找删除线、项目符号和其他格式

    任何人都可以帮助我在使用 python docx 的 Python 中识别 docx 文件中的段落是否包含带有删除线格式的文本 即它出现但被划掉 或者在开头有一个项目符号点 我正在尝试编写一个脚本来识别文档中的结构并解析内容 到目前为止 我
  • 新 WordPress 网站中出现奇怪的 url 重写问题

    我刚刚在 AWS EC2 主机中设置了一个新的 Wordpress 站点 其 DNS 主机名如下 http ec2 34 230 30 128 compute 1 amazonaws com 一切正常 所以我继续设置一个友好的域名 word
  • MySQL 错误:无法创建表(errno:121“写入或更新时重复键”)

    我使用 MySQL Workbench 生成数据库的图表和代码 当我将代码放入 phpMyAdmin 时 它显示错误 1005 无法创建表wypozyczalnia wypozyczenie 错误号 121 写入或更新时密钥重复 哪里有问题
  • 运行 TensorFlow 时使用 CNMeM 有什么意义吗?

    The CNMeM 库 https github com NVIDIA cnmem是一个 帮助深度学习框架管理 CUDA 内存的简单库 据报道 CNMeM 提供了一些有趣的速度改进 https datascience stackexchan
  • 如何提取图像中的表格

    我想从图像中提取表格 这个 python 模块https pypi org project ExtractTable https pypi org project ExtractTable 与他们的网站https www extractta
  • MD5 和 SHA1 的安全性如何

    嘿 只是一个简单的问题 因为我想更多地了解哈希函数 我知道它们如何工作以及它们做什么 但是它们的安全性如何 我希望得到一个简单的答案而不是链接 因为我从来没有发现它们有用 现在的技术 两者都可以cracked http www hackth
  • 如何在Spring中模拟ModelMapper?

    我正在尝试为我的服务层编写单元测试 SpringBootTest class ClinicServiceTest Mock private ProcedureRepository procedureRepository InjectMock
  • 一键切换两个复选框,无需js

    有没有办法切换两个combined一键点击复选框 我有一个小日历 我想用复选框选择几周 一周可以是两个月 所以同一周我有两个复选框 我怎样才能安全地将它们结合起来 我正在使用这个抽象 HTML
  • EOF 符号常量

    From C 编程语言 int c while c getchar EOF putchar c 解决办法是getchar当没有更多输入时 返回一个独特的值 该值不能与任何真实字符混淆 这个值称为EOF 表示 文件结束 我们必须声明c是一个足
  • gulp + 浏览器同步无法获取/错误

    我正在学习当前的前端构建系统 我想使用浏览器同步 问题是它不会在命令行中抛出错误 而是当它启动浏览器时 它不会显示我的html文件 并且它会在浏览器窗口中显示 无法获取 错误 这是我的 gulpfile js 代码 var gulp req