码迷,mamicode.com
首页 > 其他好文 > 详细

前端浏览器自动刷新神器:Browsersync

时间:2017-10-16 15:03:50      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:local   nbsp   自己   默认   tar   add   分享   pac   art   

 

【安装】

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】

以后可以爽快的开发了~

 

*** nodejs express做项目遇到的问题:

用到了arttemplate当模版渲染,

发现每次修改html后,必须重启nodejs才能生效,

导致browsersync失效了,

后来就放弃了。

 

今天花了点时间找了下原因,原来是arttemplate默认开启缓存导致,坑。

修改这个代码就好了:

1
template.config(‘cache‘false);

 

前端浏览器自动刷新神器:Browsersync

标签:local   nbsp   自己   默认   tar   add   分享   pac   art   

原文地址:http://www.cnblogs.com/share123/p/7676613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!