【前言】
从去年5月份入职新公司到现在，一直很忙，抽不出空来写博客了，
有人会说时间挤挤总是有的，但是我可以告诉你，每天早上9点，晚上12点，周末休一天，
简直是残酷的，学习时间严重挤压，
最近好点了，哈哈~
【browsersync】
有点标题党了，不过这个工具确实可以提高很大的开发效率，
简单的介绍就是，
使用前：
修改各种html，css，js，手动刷新页面看效果
和ui联调的时候，ui坐旁边，说一点改一点，刷新页面
使用后：
修改各种html，css，js，保存后自动刷新页面，
和ui联调的时候，丢给ui一个地址，然后你这边修改保存，她那边自动刷新，cool~
【放弃了一段时间】
使用browsersync两年时间了，最近一段时间放弃了，
不是browsersync的问题，是自己的问题，简单的说是，
以前项目都是静态文件，直接用browsersync自带服务器跑起来就好，
后来用nodejs express做项目，用到了arttemplate当模版渲染，
发现每次修改html后，必须重启nodejs才能生效，
导致browsersync失效了，
后来就放弃了。
今天花了点时间找了下原因，原来是arttemplate默认开启缓存导致，坑。
修改这个代码就好了：
|
1
|
template.config(
'cache'
,
false
);
|
【安装】
|
1
|
npm
install
-g browser-
sync
|
【静态项目使用browsersync】
自己可以去browsersync官网查看，其实使用很简单，总结下就是：
|
1
|
browser-
sync
start --server --files
"**/*.css, **/*.html, **/*.js"
|
cd到项目下，然后执行上面的方法即可，
简单的说就是会监听该目录下的html，css，js变化，然后自动刷新页面
【动态项目使用browsersync】
动态项目的意思，就是用java，php，nodejs跑起来的项目，同时又想监听html，css，js的变化，
拿nodejs来说，跑起一个端口9007的项目：
然后用browsersync的proxy做代理，监听这个项目：
代码：
|
1
|
browser-sync start --proxy
"localhost:9007"
--files
"static/**/*.css, static/**/*.js, views/**/*.html"
|
和静态项目的不同点是：
静态项目：用browsersync自带的server跑起来
动态项目：用java，php，nodejs跑起来，然后通过代理监听项目静态资源
【browsersync】
如果每次输入命令行麻烦，可以用browsersync的api方式，
就是在项目下新建一个bs.js文件，然后内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// require 加载 browser-sync 模块
var
bs = require(
'browser-sync'
).create();
// .init 启动服务器
bs.init({
proxy :
'localhost:9007'
,
port : 9017,
ui : {
port: 9027
},
files : [
'static/**/*.css'
,
{
match: [
'views/**/*.html'
],
fn:
function
(event, file){
// bs.reload();
}
}
]
});
// 现在请BS，而不是方法
// 主Browsersync模块出口
bs.reload(
'*.html'
);
|
启动的时候使用node bs.js即可
具体api查看：http://www.browsersync.cn/docs/api/
【end】
以后可以爽快的开发了~
http://uikoo9.com/更多精彩内容
| 求打赏（长按图片即可识别）~ |
 捐助列表：http://uikoo9.com/donate/ |
阅读： 19次