发布网友 发布时间:2022-04-24 08:54
共3个回答
懂视网 时间:2022-04-21 16:30
做 Web 开发的时候,我们做一些修改然后刷新页面查看效果。 Browsersync 可以让你省去后面那一步,只要修改网页文件保存就可以,它会监控文件的变化(html/js/css)并自动刷新页面,这样就不用手动刷新了。Good!
图片来自网络
Browsersync 真正强大的地方在于跨设备同步。你可以用桌面、手机、平板等不同设备的浏览器同时打开你正在开发的网页,其中任何一个页面上的操作(如点击、滚动、表单填写和提交)会在所有其它页面上自动同步!当然,同一个机器上的同一个浏览器或不同浏览器的多个页面也可以。
图片来自网络
例如,你在两台电脑(Win和Mac)、Android 手机和 iPad 平板上同时打开指定的页面,你所做的任何文件修改在这4个浏览器上都会自动刷新,在任何一个打开的页面上滚动页面或点击链接跳转,所有其它页面上都会同时执行同一操作。这样大幅提高了你在多设备、多浏览器上的开发和测试效率!
安装和使用
1. 安装
Shell
npm install -g browser-sync
npminstall -g browser-sync
2. 启用
Shell
browser-sync start --server --files "css/*.css"
browser-syncstart --server --files "css/*.css"
上面的命令针对静态网页启动了一个简单的 web server ,并且会监控 css 文件的变化。如果是动态页面则需要使用代理模式:
Shell
browser-sync start --proxy "myproject.dev" --files "css/*.css"
browser-syncstart --proxy "myproject.dev" --files "css/*.css"
另外,Browsersync 可以和 Gulp 集成 或 Grunt 集成 。
启动后的默认服务地址是:http://localhost:3000 或 http://your-ip:3000 ,使用浏览器打开该地址下的页面即可。
http://localhost:3001 是 Browsersync 服务的配置页面,可以设置同步选项、网速模拟等。
除了 Browsersync ,另外一个类似的工具是 LiveReload 。
如果你想知道页面中某个位置使用的字体,试试 WhatFont 吧!它是一个 Chrome 扩展,鼠标点到哪里就能显示该位置文字使用的字体。
Alfred 是另一个 Mac 提高效率的好工具。它可以帮你快速打开某个程序、文件/文件夹、执行定制的搜索等。近几年 Mac 系统自带的 Spotlight 在这方面的功能也有了大幅提高。不过,Alfred 还有很多扩展的功能。
作者:韩国恺。本系列文章以 Addy & Matt 的系列视频 Totally Tooling Tips 的内容为基础重新整理而成,主要介绍一些(前端)开发者喜欢的工具和技巧。
Post Views: 18
除非特别声明,此文章内容采用 知识共享署名 3.0 许可,代码示例采用 Apache 2.0 许可。更多细节请查看我们的 服务条款 。
热心网友 时间:2022-04-21 13:38
所谓生产力就是人们征服自然、改造自然以获得物质生活资料的能力,是人们改造自然的物质力量,它表示的是生产中人对自然界的关系。热心网友 时间:2022-04-21 14:56
构成生产力的基本要素是:以生产工具为主的劳动资料,引入生产过程的劳动对象,具有一定生产经验与劳动技能的劳动者。