Express 全栈刷新

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/transformer_WSZ/article/details/84975522

1. 安装 Express 应用程序生成器：
   • npm install express-generator -g
2. 创建目录名为 myapp 的 Express 的应用程序：
   • express --view=pug myapp
3. 进入目录并安装依赖：
   1. cd myapp
   2. npm install
4. 安装 gulp：
   • npm install --save-dev gulp
5. 安装 gulp-nodemon：
   • npm install --save-dev gulp-nodemon
6. 安装 browser-sync：
   • npm install --save-dev browser-sync
7. 在项目根目录下新建 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 () {
    var files = [
        'views/**/*.html',
        'views/**/*.ejs',
        'views/**/*.jade',
        'views/**/*.pug',
        'routes/**/*js',
        'public/**/*.*'
    ];

    //gulp.run(["node"]);
    browserSync.init(files, {
        proxy: 'http://localhost:3000',
        browser: 'chrome',
        notify: false,
        port: 4001 //这个是browserSync对http://localhost:3000实现的代理端口
    });

    gulp.watch(files).on("change", reload);
});

8. 在项目根目录下输入命令：
   • ./node_modules/.bin/gulp server
9. 在浏览器中输入 localhost:4001 即可看到结果。
   

---

参考自：

• http://www.cnblogs.com/moreyear/p/6020305.html
• https://www.cnblogs.com/webSong/p/7429230.html