express+gulp+gulp-nodemon+browser-sync自动刷新
express自动生成项目。不在赘述
1、在项目根目录下新建终端,依次运行如下命令
npm install gulp --save-dev
npm install gulp-nodemon --save-dev
npm install browser-sync --save-dev
package.json会有如下依赖:
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1"
}
2、在项目根目录新建一个gulpfile.js
配置如下:
// 添加引用
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon'); //这个可以让express启动
gulp.task("node", function() {
nodemon({
script: './bin/www',
ext: 'js jade',
env: {
'NODE_ENV': 'development'
}
})
}); // gulp.task('js-watch', ['js'], browserSync.reload); gulp.task('server',["node"], function() { var files = [
'views/**/*.jade',
'routes/**/*.js',
'public/**/*.css',
'app.js'
]; browserSync.init(files, {
proxy: 'http://localhost:3000',
browser: ['chrome','safari'],
notify: false,
port: 4001,
open:false,
ghostMode: {
clicks: true,
scroll: true
}
}); gulp.watch(files).on("change", reload);
});
3、运行:
gulp server
结果,修改jade,界面能够立即刷新,但是修改routes下面的js文件,尤其是修改参数,界面不能立即刷新。有时候需要等待很长时间.尚不清楚原因。不过修改js文件手动刷新界面的话不影响使用。
参考:
https://www.browsersync.io/docs/gulp
https://www.cnblogs.com/moreyear/p/6020305.html
express+gulp+gulp-nodemon+browser-sync自动刷新的更多相关文章
- gulp 自动化构建html项目--自动刷新
使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --vers ...
- 使用gulp和browser-sync实现浏览器自动刷新
安装gulp (前提是已经安装了node) 全局安装: npm install -g gulp 本项目安装: npm install gulp --save-dev 安装browser-sync 全局 ...
- Gulp 项目简单构建,自动刷新页面
/** * Created by 1900 on 12/18/2015. */ var plugins={ fs:require("fs"), gulp:require(" ...
- Browsersync结合gulp和nodemon实现express全栈自动刷新
Browsersync能让浏览器实时.快速响应你的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...
- gulp+browserSync+nodemon 实现express 全端自动刷新的实践
学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...
- gulp自动刷新插件
gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm in ...
- 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。
本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
- 使用gulp插件来自动刷新页面。
http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...
随机推荐
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- TWELP™ Vocoder
TWELP™ Vocoder DSP Innovations Inc. (DSPINI) announces new class of proprietary vocoders for wide ...
- npm错误:Error: listen EADDRNOTAVAIL
错误 Error: listen EADDRNOTAVAIL 127.0.0.1:8080 有两种情况 8080端口被绑定了 地址错误 Error: getaddrinfo ENOTFOUND 域名错 ...
- 推荐几个Windows工具软件: HDDB - Everything的替代品
主页: http://hddb.xp-zed.com/index.html 简单地说,HDDB 是NTFS磁盘的文件搜索工具,它最开始是模仿 Everything 的,但解决了 Everything ...
- net use错误原因解决(精辟)(转)
(1)"发生系统错误 1326. 登录失败: 未知的用户名或错误密码." 在远程机的"控制面板-文件夹选项-查看-简单的文件共享",去掉选取,然后再尝试连接 ...
- Android GIS +webservice
Android新手经典入门教程 Android开发教程(完全免费版) Android SDK v3.1.0 Android定位功能(一) Android定位功能(二) Android 百度地图开发(一 ...
- Docker GitLab镜像部署
环境说明 系统环境: CentOS Linux release 7.4 docker Version: 18.03.1-ce 运行镜像 docker run --detach \ --hostname ...
- 零基础 Vue 开发环境搭建 打开运行Vue项目
[相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...
- nmon 加权平均法
Snapshot %tm_act 1 0 2 0 3 0 4 0 5 0 6 6.1 7 6.3 8 6.5 9 9.1 10 5.9 11 0 12 0 13 0 14 0 15 0 (10*0*0 ...
- [Artoolkit] Framework Analysis of nftSimple
What is nftSimple? Loads NFT dataset names from a configuration file. The example uses the “Pinball. ...