gulp+browserSync+nodemon 實現express 全端自動刷新的實踐

時間 2019-11-24

標籤 gulp+browsersync+nodemon gulp browsersync nodemon 實現 express 自動刷新實踐欄目 JavaScript 简体版

原文原文鏈接

學習過程寶寶內心苦，不能怨政府。。javascript

興趣所致，一直放不下nodejs的學習，時隔多日，又把express撿起來打算從新再學學，一直沒什麼太大的長進，和實際的項目經驗。真的醉了，太懶了。html

今天在從新研究supervisor的時候，忽然以爲這東西只有在服務端文件修改時纔會觸發刷新，前端樣式文件模板等等刷新時不會，前端

能實現前端修改也自動刷新不？想一想平時本身用gulp 搭虛擬服務器，用browser自動刷新，因而打算試試。java

gulp+browserSync 算是原來就有的，如今應該把目標分幾步來實現，node

一、在gulp裏運行 express 啓動的命令chrome

二、實現自動刷新express

在google+baidu 下不停的找啊搜啊，找啊搜啊，猛然發現了 gulp 好插件，gulp-nodemon! 看完介紹趕忙安裝！npm

順便提一句，npm 插件爲了全部項目能共用，我把node_module放在了工做文件夾的根目錄了，因此gulp插件也都安裝在這裏，而不是在express的項目當中，一份通用的package.json仍是很重要的。json

a\先安裝gulp

npm install --save-dev gulp-nodemon

b\修改gulpfile配置文件

 1 // 添加引用
 2 var browserSync = require('browser-sync');
 3 var reload = browserSync.reload;
 4 var nodemon = require('gulp-nodemon');
 5 
 6 //這個可讓express啓動
 7 gulp.task("node", function() {
 8     nodemon({
 9         script: './bin/www',
10         ext: 'js html',
11         env: {
12             'NODE_ENV': 'development'
13         }
14     })
15 });
16 
17 
18 gulp.task('server', ["node"], function() {
19     var files = [
20         'views/**/*.html',
21         'views/**/*.ejs',
22         'views/**/*.jade',
23         'public/**/*.*'
24     ];
25 
26     //gulp.run(["node"]);
27     browserSync.init(files, {
28         proxy: 'http://localhost:4000',
29         browser: 'chrome',
30         notify: false,
31         port: 4001
32     });
33 
34     gulp.watch(files).on("change", reload); 
35 });