zoukankan      html  css  js  c++  java
  • node express4 + 前端自动刷新

    官网快速生成:http://www.expressjs.com.cn/starter/generator.html

    1.安装  express

      1.应用生成器工具 express-generator 可以快速创建一个应用的骨架。

      $ npm install express-generator -g

      2.如下命令创建了一个名称为 myapp 的 Express 应用。此应用将在当前目录下的 myapp 目录中创建,并且设置为使用 Pug 模板引擎

    $ express --view=pug myapp

      3.然后安装所有依赖包:

    $ cd myapp
    $ npm install

      4.通过如下命令启动此应用:

    npm start

    2.部署自动化刷新页面

      自动更新配置的 app.js 不用重启

     

      法1.

      在开发的时候,每次修改文件,都需要重启 express 服务,比较麻烦。使用nodemon,修改文件后可以自动重启 express 服务。

      

    npm install --save-dev nodemon
      修改 package.json 的 scripts 内容:
    "scripts": {
        "start": "node ./bin/www",
        "devstart": "nodemon ./bin/www"
      }

    之后,使用 

    SET DEBUG=myapp:* & npm run devstart
    

      

     启动 express 服务。这样在开发过程中修改文件的时候,express服务就会自动重启,非常方便。

      法2.

      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 文件,文件中的代码如下:
        1. 需要修改包内的gulp版本为3.9.1 gulp4的版本不支持以上写法

          

    // 添加引用
    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',
        'public/**/*.*',
        'routes/**/*.*'
      ];
    
      //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);
    });

    上面代码中的代理端口 proxy: 'http://localhost:3000', 记得要和express项目里 bin/www 文件的配置中的var port = normalizePort(process.env.PORT || '3000'); 要一致!(这里都是3000端口)

    在命令行输入 gulp server 启动代理端口(也就是4001),这样就可以实现了前后端自动刷新功能了~

     

    参考网站摘自:

    https://www.jianshu.com/p/c5baef64563a
     
    https://www.cnblogs.com/webSong/p/7429230.html
  • 相关阅读:
    HDOJ 2095 find your present (2)
    HDOJ 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你
    九度 1337 寻找最长合法括号序列
    九度 1357 疯狂地Jobdu序列
    HDOJ 1280 前m大的数
    九度 1343 城际公路网
    九度 1347 孤岛连通工程
    HDOJ 2151 Worm
    九度 1342 寻找最长合法括号序列II
    九度 1346 会员积分排序
  • 原文地址:https://www.cnblogs.com/NB-JDzhou/p/11194305.html
Copyright © 2011-2022 走看看