搬运自【http://blog.csdn.net/zhu_free/article/details/51476525】

gulp-express实现实时刷新

本来使用gulp-connect可以创建本地服务器,配合Livereload就可以实现实时刷新,但express项目自带了服务器,就不太好办了,之前用了gulp-express,实现了一部分,感觉很方便,但是只有jade模板变化会实时刷新,样式表和js文件则不会,之前的部分代如下:

gulp.task('server', ['styles', 'scripts'], function() {
express.run(['./bin/www']); //启动 gulp.watch('src/scss/**/*.scss', ['styles']); //监视样式表
gulp.watch('src/js/**/*.js', ['scripts']); //监视js文件
gulp.watch('views/**/*.jade', express.notify); //监视模板文件
gulp.watch(['app.js', 'routes/**/*.js'], express.run);
}); gulp.task('default', ['server']);

  

找了一些资料提到一些gulp-livereloadconnect-livereload各种,还是没有想出来解决办法,最后忽然想到是不是gulp-express已经自带了,然后注意到express.notify这个函数貌似就是刷新的意思,于是尝试在stylesscripts方法里面结尾加上express.notify(),结果并没有什么卵用,然后试着在watch方法的callbacks列表后面加上notify:

gulp.watch('src/scss/**/*.scss', ['styles', express.notify]); //监视样式表
gulp.watch('src/js/**/*.js', ['scripts', express.notify]); //监视js文件

  

还是没有作用→_→ 
然后试着在模板文件的路径前面加上样式表和js文件的路径:

gulp.watch(['views/**/*.jade', 'src/js/**/*.js', 'src/scss/**/*.scss'], express.notify);

  

最后的解决办法是。。。代码加上了这两句

gulp.watch('public/**/*.css', express.notify);
gulp.watch('public/**/*.js', express.notify);

  

总结完整代码

gulp.task('server', ['styles', 'scripts'], function() {
express.run(['./bin/www']); //启动 gulp.watch('src/scss/**/*.scss', ['styles']); //监视样式表
gulp.watch('src/js/**/*.js', ['scripts']); //监视js文件
gulp.watch('views/**/*.jade', express.notify); //监视模板文件
gulp.watch(['app.js', 'routes/**/*.js'], express.run);
gulp.watch('public/**/*.css', express.notify);
gulp.watch('public/**/*.js', express.notify);
}); gulp.task('default', ['server']);

  

nodejs里的express自动刷新gulp-express使用【转载】的更多相关文章

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

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

  2. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

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

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

  4. gulp+browserSync+nodemon 实现express 全端自动刷新的实践

    学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...

  5. express+gulp+gulp-nodemon+browser-sync自动刷新

    express自动生成项目.不在赘述 1.在项目根目录下新建终端,依次运行如下命令 npm install gulp --save-dev npm install gulp-nodemon --sav ...

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

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

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

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

  8. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  9. gulp下livereload和webserver实现本地服务器下文件自动刷新

    一.前言 node从v0.10.26升级(为了匹配autoprefixer)到v5.3.0后出现了gulp插件兼容问题,在nodejs下各种新的插件出现问题,需要重新配置.livereload实现ch ...

随机推荐

  1. POJ_2112_Optimal Milking 这里有超级快的网络流板子

    Description FJ has moved his K (1 <= K <= 30) milking machines out into the cow pastures among ...

  2. ACM.hdu1025

    to get the ans of how many roads at most that can be built between two line without intersection of ...

  3. Qt中内存泄露和退出崩溃的问题 delete

    Qt中帮程序员做了一些内存回收的事情,但正因为这些反而让对此不熟悉的人会屡屡犯错. 收录一篇不错的文章: 在C++中学习过程中,我们都知道: delete 和 new 必须 配对使用(一 一对应):d ...

  4. [技巧篇]12.从Spring的编码过滤器说起

    有一枚学生问问了我一个问题,突然灵感爆发,他使用的Spring的过滤器,前台利用GET方式向后端发出一个请求,由于里面含有中文数据,结果在后端显示的是乱码,他问我为什么?明明在Spring里面也配了字 ...

  5. 【转】Pyhton 单行、多行注释符号使用方法及规范

    转自:Pyhton 单行.多行注释符号使用方法及规范 python中的注释有多种,有单行注释,多行注释,批量注释,中文注释也是常用的.python注释也有自己的规范,在文章中会介绍到.注释可以起到一个 ...

  6. 【20161109】noip模拟赛

    1.Game [题目描述] 明明和亮亮在玩一个游戏.桌面上一行有n个格子,一些格子中放着棋子.明明和亮亮轮流选择如下方式中的一种移动棋子(图示中o表示棋子,*表示空着的格子): 1) 当一枚棋子的右边 ...

  7. bzoj 4034: [HAOI2015]树上操作——树链剖分

    Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中 ...

  8. 崩坏3mmd中的渲染技术研究

    http://youxiputao.com/articles/11839 主要是参考该篇文章做一个微小的复盘. 漫反射与高光 文章中的漫反射与高光并不是类似于普通的 resultCol = Diffu ...

  9. DotNet 学习笔记 OWIN

    Open Web Interface for .NET (OWIN) ----------------------------------------------------------------- ...

  10. Windows Server 2008 R2英文版修改桌面主题(Win7主题)

    1:首先打开Server Manager(凡是不知道在那里开发均可像Win7一样在运行里面搜索) 2:然后在左边的树形菜单中选择:Feature 点击右边页面中的:Add Features 这时候会出 ...