前端神器-Browsersync 作于2017-05-17

4.png

【前言】

从去年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默认开启缓存导致,坑。

修改这个代码就好了:

template.config('cache', false);


【安装】

npm install -g browser-sync


【静态项目使用browsersync】

自己可以去browsersync官网查看,其实使用很简单,总结下就是:

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

cd到项目下,然后执行上面的方法即可,

简单的说就是会监听该目录下的html,css,js变化,然后自动刷新页面


【动态项目使用browsersync】

动态项目的意思,就是用java,php,nodejs跑起来的项目,同时又想监听html,css,js的变化,

拿nodejs来说,跑起一个端口9007的项目:

1.png

然后用browsersync的proxy做代理,监听这个项目:

2.png

代码:

browser-sync start --proxy "localhost:9007" --files "static/**/*.css, static/**/*.js, views/**/*.html"


和静态项目的不同点是:

静态项目:用browsersync自带的server跑起来

动态项目:用java,php,nodejs跑起来,然后通过代理监听项目静态资源


【browsersync】

如果每次输入命令行麻烦,可以用browsersync的api方式,

就是在项目下新建一个bs.js文件,然后内容如下:

// 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/

阅读:2263