学习过程宝宝心里苦,不能怨政府。。

兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验。真的醉了,太懒了。

今天在重新研究supervisor的时候,突然觉得这东西只有在服务端文件修改时才会触发刷新,前端样式文件模板等等刷新时不会,

能实现前端修改也自动刷新不?想想平时自己用gulp 搭虚拟服务器,用browser自动刷新,于是打算试试。

gulp+browserSync 算是原来就有的,现在应该把目标分几步来实现,

1、在gulp里运行 express 启动的命令

2、实现自动刷新

在google+baidu 下不停的找啊搜啊,找啊搜啊,猛然发现了 gulp 好插件,gulp-nodemon! 看完介绍赶紧安装!

顺便提一句,npm 插件为了所有项目能共用,我把node_module放在了工作文件夹的根目录了,所以gulp插件也都安装在这里,而不是在express的项目当中,一份通用的package.json还是很重要的。

a\先安装

npm install --save-dev gulp-nodemon

b\修改gulpfile配置文件

 // 添加引用
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon'); //这个可以让express启动
gulp.task("node", function() {
nodemon({
script: './bin/www',
ext: 'js html',
env: {
'NODE_ENV': 'development'
}
})
}); gulp.task('server', ["node"], function() {
var files = [
'views/**/*.html',
'views/**/*.ejs',
'views/**/*.jade',
'public/**/*.*'
]; //gulp.run(["node"]);
browserSync.init(files, {
proxy: 'http://localhost:4000',
browser: 'chrome',
notify: false,
port: 4001
}); gulp.watch(files).on("change", reload);
});

browserSync的proxy参数是被代理地址,你可以认为是express运行的那个地址,所以proxy里的这个4000的端口号要和express 4.x 里 bin/www 文件里的端口号保持一致。

其实这个地方就是我之前好久搞不定的原因,端口号配错了。。(心里蓝瘦香菇)(中间还睡了一觉  = =! 因为搞了好久没搞定,眼睛都困了)

//express项目里 bin/www 文件的配置 var port = normalizePort(process.env.PORT || '4000');

port 参数就是实际访问端口了。

3\ 运行

gulp server

效果出来了哦,网页自动打开为http://localhost:4001/,而不需要自己手动敲地址了哦!

试试修改前端页面,ctrl+s

reloading 了哦~~!

再来试试服务端文件修改。

成了!不过提示一下,服务端文件修改要按两次 ctrl+s 才会刷新页面。我不想深究为啥了,我手快!

(原因想了一下 应该是在修改服务端文件后,  重启应用造成的,重启时不会刷新,所以在启动后再按保存会刷新)

拿着利器继续好好学习吧~

中间还尝试了 node-supervisor 应该是和node-nodemon 差不多的插件,并且和npm的 supervisor包 作用差不多,可以实现启动node ,但自动刷新没试出来,再继续研究下这个东东。

我懒,但我也想进步!加油!

配图实在太恶心拉!!!

gulp+browserSync+nodemon 实现express 全端自动刷新的实践的更多相关文章

  1. Browsersync结合gulp和nodemon实现express全栈自动刷新

    Browsersync能让浏览器实时.快速响应你的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...

  2. BrowserSync(保存代码后,自动刷新浏览器)

    摘要 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项 ...

  3. express+nodemon 修改后浏览器自动刷新

    添加nodemon模块 cnpm install --save nodemon 根目录添加文件 nodemon.json { "restartable": "rs&quo ...

  4. nodejs里的express自动刷新高级篇【转载】

    搬运自[简书:http://www.jianshu.com/p/2f923c8782c8]亲测可用哦! 最近在使用express框架及mongodb,由于前端和后端代码修改后都需要实现自动刷新功能,刚 ...

  5. gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

    gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...

  6. 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。

    本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...

  7. 使用Gulp实现网页自动刷新:gulp-connect

    入门指南 1. 全局安装 gulp: npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: npm install --save-dev ...

  8. gulp browser-sync自动刷新插件

    很久没弄gulp了,都快忘了,今天又来温习下browser-sync 自动刷新插件,在安装的时候出现以下提示: $ npm install browser-sync --save-dev> ws ...

  9. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

随机推荐

  1. bzoj 1880 [Sdoi2009]Elaxia的路线(最短路+拓扑序)

    Description 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w**每天都要奔波于宿舍和实验室之间, ...

  2. vijosP1115 火星人

    vijosP1115 火星人 链接:https://vijos.org/p/1115 [思路] 排列组合. 题目要求为求第下m个排列. 这里有两种方法,首选的是调用algorithm中的next_pe ...

  3. hdoj 1237 简单计算器

    简单计算器 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  4. DevExpress GridControl 显示行号、设置行号宽

    显示行号类 /// <summary> /// GridView 显示行号 设置行号列的宽度 /// </summary> /// <param name="g ...

  5. JBPM学习(五):流程变量

    1.启动流程实例 // 启动流程实例 @Test public void startProcessInstance() { // 使用指定key的最新版本的流程定义启动流程实例 ProcessInst ...

  6. 关于学习汇编的一些规则的理解(div mul cf of)

    ->1.div(除法)  被除数/除数 ->一共有三种格式的除法,分别是8位,16位,32位,这里的位数表示的是除数的位数 ->实现div其实也很简单就是除数为被除数的一半就ok - ...

  7. 自定义Dictionary支持线程安全

    本文转载:http://www.cnblogs.com/kiddo/archive/2008/09/25/1299089.html 我们说一个数据结构是线程安全指的是同一时间只有一个线程可以改写它.这 ...

  8. cocos2d-x 的CCObject与autorelease 之深入分析

    转自: http://blog.csdn.net/honghaier/article/details/8160519 CCObject.h: #ifndef __CCOBJECT_H__ #defin ...

  9. SMB带宽限制

    1.安装SMB带宽限制功能 Add-WindowsFeature FS-SMBBW 2.通过PowerShell命令限制SMB带宽 #限制非Hyper-V over SMB or Live Migra ...

  10. HDInsight-Hadoop实战(一)站点日志分析

    HDInsight-Hadoop实战(一)站点日志分析 简单介绍 在此演示样例中.你将使用分析站点日志文件的 HDInsight 查询来深入了解客户使用站点的方式.借助此分析.你可查看外部站点一天内对 ...