自动搭建前端实时可视化开发工具

作为一个前端er,前端开发中,我们常常频繁的修改 html,css,js,然后刷新页面,看效果,在调整,再刷新。这里教大家使用browserSync工具实现帮你实现修改代码后,立即体现效果,使用可见即可得的开发模式,极大的提高前端开发效率。

1. 安装 Node.js

BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 。安装适用于Mac OS,Windows和Linux。node.js官网

2. 安装 BrowserSync

您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:

npm install -g browser-sync

您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任何目录)中使用。

3. 启动 BrowserSync

一个基本用途是,如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:

 BrowserSync 将自动启动一个小型服务器,自动打开你默认浏览器,并提供一个URL来查看您的网站(默认打开index.html),其他页面的话,可以根据自己项目的相对路径去访问。

// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css"

如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

4.实战例子讲解:

上面安装好了nodejs和browserSync的话,接下来新建一个项目:比如我新建在E盘目录下一个test项目,test项目下有index.html,test.html,css文件夹,css文件夹里面有一个style.css文件,

如图:,新建好项目后,打开命令行工具(cmd),进入该项目(目录下):, 然后直接运行以下代码:

browser-sync start --server --files "css/*.css, *.html"

也会自动打开项目index页面,执行到这一步,恭喜你已经是成功了。你还想访问test.html,这样访问就好,接下来,聪明的你应该知道怎么做了吧,更改你的代码或者文字,浏览器就会自动实时更新了。

分析:browser-sync start –server –files “css/*.css, *.html”  这行代码就是监听当前目录下的css文件夹中所有.css文件,和当前目录下所有html文件。还有你的项目文件层级比较深的话,

// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

好了,我就分享到这里了,希望能帮到大家理解。以上教程来自: Browsersync中文网 大家想了解browsersync更多用法的功能的话,可以直接到browsersync官网了解。这个工具确实是前端er一大神器,值得推荐!

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。