当前位置:Gxlcms > html代码 > 三个生产力工具:Browsersync,WhatFont和Alfred_html/css_WEB-ITnose

三个生产力工具:Browsersync,WhatFont和Alfred_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

Browsersync

做 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

如果你想知道页面中某个位置使用的字体,试试 WhatFont 吧!它是一个 Chrome 扩展,鼠标点到哪里就能显示该位置文字使用的字体。

Alfred

Alfred 是另一个 Mac 提高效率的好工具。它可以帮你快速打开某个程序、文件/文件夹、执行定制的搜索等。近几年 Mac 系统自带的 Spotlight 在这方面的功能也有了大幅提高。不过,Alfred 还有很多扩展的功能。

作者:韩国恺。本系列文章以 Addy & Matt 的系列视频 Totally Tooling Tips 的内容为基础重新整理而成,主要介绍一些(前端)开发者喜欢的工具和技巧。

Post Views: 18

除非特别声明,此文章内容采用 知识共享署名 3.0 许可,代码示例采用 Apache 2.0 许可。更多细节请查看我们的 服务条款 。

人气教程排行