井井客

搜索

五分钟进入browsersync的世界

之前在幕课网上就有看过browsersync这类前端工具的教程,正好这两天在做个flex布局的静态小页面时用上了,再不用F5手动刷新页面了!很赞!

五分钟进入browsersync的世界

幕课网链接:http://www.imooc.com/learn/718

中文说明文档:http://www.browsersync.cn/

浏览器兼容:
Chrome、火狐、IE8 +、Safari、Opera、Android、黑莓、Firefox移动、iOS、Opera移动、Windows Phone

在此我复制出一份比较简单操作流程。

第一步:安装 Node.js

安装不用多说了...

第二步:安装BrowserSync的npm包

在终端中运行以下命行(所有项目中都可用):

npm install -g browser-sync

若只需要个别目录中使用的话,可以进行相应的目录下,运行:

npm install --save-dev browser-sync

第三步:启动BrowserSync(静态网站)

你可以在项目目录下执行:

browser-sync start --server --files "**"

这个意思就是监听当前目录下所有的文件,你也可以根据实际需要。若只监听css文件,则可以:

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

监听多个文件夹,如监听css与js文件,则:

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

后面的冒号里面的通配符应该也是比较好理解的。

因为我还没有监听动态站的需求,这边只有监听静态站。
所以更高级的应用,建议去上面提到的第二个链接中去看一下~

文章TAG:工具

作者:井井客整理来源:互联网
本文标题:五分钟进入browsersync的世界
本文链接:http://www.jingjingke.com/c/19255.html

上一篇:【VUE实例】vue2中watch数组对象查看新旧值
下一篇:vue2下拉刷新实例

文章分类

相关阅读

随便看看