技术控

    今日:48| 主题:49369
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] browser-sync+nodemon+nginx配置在WebStorm

[复制链接]
雨与泪 发表于 2016-9-30 14:45:03
101 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
由于前端开发的时候都经常使用F5刷新网页来做更新与查看调试,browser-sync为前端开发人员定制来节省时间,当文件保存就能自动刷新,下面记录一下,我的配置过程:
  一、安装browser-sync:

  这个没有什么好说的,就一句命令:npm i browser-sync -g
  配置文件 bs-config.js:
  [code]module.exports = {
"files": [
    "static/**/*.html",
    "static/**/*.css",
    "static/**/*.js"
],
"port": 3001,
"proxy": "xxx.xxx.com"[/code]  };
  二、安装nodemon:

  之前开发node工程我都是用supervisor来启动node,但这个supervisor有点毛病,就是当目录下有文件更改就自动重启,包括node_modules与静态网页资源,设置忽略是可以的,但都是写在命令后面,感觉不美观(我承认我有强迫症),而且插件更新也很慢;
  除此而外,还预到了坑,当supervisor重启后,browser-sync也自动重启,然后就自动打开一个新的网页,我只想说一个字:靠!
  我要的只是刷新网页功能,想了半天才怀疑是supervisor搞的鬼;
  后面改用nodemon,添加上配置文件 nodemon.json:
  [code]{
  "restartable": "rs",
  "ignore": [
    ".git",
    "node_modules",
    "static",
    "staticPub"
  ],
  "verbose": true,
  "execMap": {
    "js": "node --harmony"
  },
  "events": {
    "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
  },
  "env": {
    "NODE_ENV": "dev"
  },
  "ext": "js json"
}[/code]  直接读取配置文件,美观多了; 输入命令:nodemon --config ./nodemon.json ./bin/www 搞掂;
  三、nginx配置

  其实如果不需要域名的话,其实这一步是可以忽略的,那是因为我们的页面请求接口都有域名限制,所以只能在本地配置好域名访问,当请求接口时,就能正常返回数据了;
  [code]server {
    listen       80;
    server_name  xxx.xxxx.com;

    location / {
        #root   html;
        #index  index.html index.htm;
        resolver_timeout 30s;
        proxy_pass http://localhost:3001/;
    }
    location = /50x.html {
        root   html;
    }
}[/code]  我的browser-sync的端口是3001,所以当启动browser-sync时,在页面访问xxx.xxxx.com就可以了;
  四、配置WebStorm

  当我们开发的时候,要用插件时,没可能次次都敲命令执行吧,效率多慢?聪明点就是把命令语句都写好,复制粘贴,但我也是觉得慢,还不如在开发工具上配置好,点一个安钮即可使用;
  以下是我WebStorm的配置:
   
browser-sync+nodemon+nginx配置在WebStorm-1 (配置文件,强迫症,files,而且,工程)


browser-sync+nodemon+nginx配置在WebStorm-2 (配置文件,强迫症,files,而且,工程)

  添加一个node服务,把配置文件都放到工程下面,把命令都写好,这样要启动插件就可以使用快捷键或者启动按钮即可,我都懒得打开cmd来复制粘贴。
  不要以为现在就搞掂了,WebStorm其实还有坑的,就是自动保存功能,这个功能会导致browser-sync检测不到文件的修改:
12下一页
友荐云推荐




上一篇:[原]微服务设计的几点思考
下一篇:他趣已有平台引入直播的实战之路|架构师实践日
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

程文轩 发表于 2016-9-30 16:34:06
前排卖瓜子,汽水!
回复 支持 反对

使用道具 举报

635365 发表于 2016-10-1 00:26:50
宁愿笑着流泪,也不哭着说后悔.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表