最新發(fā)現(xiàn)有問題眶明,已更新诵原,請轉(zhuǎn)到?Express自動刷新
最近使用了下express進(jìn)行開發(fā)愤诱,每次修改代碼都需要Ctrl+C 又npm start 活喊,開發(fā)效率大大打折扣丐膝,所以再網(wǎng)上找了下一些文章,本人綜合如下钾菊,如有不對敬請笑納帅矗!
先使用express腳手架生成了初始化項目結(jié)構(gòu)
1、首先 肯定安裝gulp ?npm install --save-dev gulp
2结缚、接下來安裝后端代碼自動刷新插件gulp-nodemon ?npm install --save-dev gulp-nodemon
3损晤、然后安裝browser-sync ?npm install --save-dev browser-sync
4、在項目根目錄中新建gulpfile.js 文件红竭,文件中的代碼如下:
// 添加引用
var gulp=require('gulp');
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() {
//此處的files為你所需要跟蹤的文件尤勋,根據(jù)實際項目需要配置即可
? ? var files = [
? ? ? ? 'views/**/*.html',
? ? ? ? 'views/**/*.ejs',
? ? ? ? 'views/**/*.jade',
? ? ? ? 'public/**/*.*',
? ? ? ? 'routes/*.*',
? ? ];
? ? //gulp.run(["node"]);
? ? browserSync.init(files, {
? ? ? ? proxy: 'http://localhost:3000',
? ? ? ? browser: 'chrome',
? ? ? ? notify: false,
? ? ? ? port: 4001 //這個是browserSync對http://localhost:3000實現(xiàn)的代理端口
? ? });
? ? gulp.watch(files).on("change", reload);
});
***注意:參數(shù) proxy 中的端口需要與 ./bin/www 文件中的端口一致
5、在命令行輸入 gulp server 啟動代理端口(也就是4001)茵宪,這樣就可以實現(xiàn)了前后端自動刷新功能了
就這么簡單就可以實現(xiàn)自動刷新了