请选择 进入手机版 | 继续访问电脑版

技术控

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

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

[复制链接]
雨与泪 发表于 2016-9-30 14:45:03
168 2
由于前端开发的时候都经常使用F5刷新网页来做更新与查看调试,browser-sync为前端开发人员定制来节省时间,当文件保存就能自动刷新,下面记录一下,我的配置过程:
  一、安装browser-sync:

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

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

  其实如果不需要域名的话,其实这一步是可以忽略的,那是因为我们的页面请求接口都有域名限制,所以只能在本地配置好域名访问,当请求接口时,就能正常返回数据了;
  1. server {
  2.     listen       80;
  3.     server_name  xxx.xxxx.com;
  4.     location / {
  5.         #root   html;
  6.         #index  index.html index.htm;
  7.         resolver_timeout 30s;
  8.         proxy_pass http://localhost:3001/;
  9.     }
  10.     location = /50x.html {
  11.         root   html;
  12.     }
  13. }
复制代码
我的browser-sync的端口是3001,所以当启动browser-sync时,在页面访问xxx.xxxx.com就可以了;
  四、配置WebStorm

  当我们开发的时候,要用插件时,没可能次次都敲命令执行吧,效率多慢?聪明点就是把命令语句都写好,复制粘贴,但我也是觉得慢,还不如在开发工具上配置好,点一个安钮即可使用;
  以下是我WebStorm的配置:
   

browser-sync+nodemon+nginx配置在WebStorm

browser-sync+nodemon+nginx配置在WebStorm-1-技术控-配置文件,强迫症,files,而且,工程

browser-sync+nodemon+nginx配置在WebStorm

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

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

browser-sync+nodemon+nginx配置在WebStorm

browser-sync+nodemon+nginx配置在WebStorm-3-技术控-配置文件,强迫症,files,而且,工程

  配置完成,现在就可以尽情的撸代码了;



上一篇:[原]微服务设计的几点思考
下一篇:他趣已有平台引入直播的实战之路|架构师实践日
程文轩 发表于 2016-9-30 16:34:06
前排卖瓜子,汽水!
回复 支持 反对

使用道具 举报

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

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表