express组合gulp自动更新代码重启浏览器

最新推荐文章于 2023-10-20 14:20:01 发布

原创最新推荐文章于 2023-10-20 14:20:01 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #express #源码 #vue #gulp

web前端同时被 2 个专栏收录

143 篇文章

订阅专栏

Vue

18 篇文章

订阅专栏

本文介绍如何使用 Express 和 EJS 构建 Web 应用，并利用 Gulp、Browser-Sync 和 Gulp-Nodemon 实现文件更改时的自动浏览器同步刷新，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果是前后分离express只是提供接口可用直接使用：nodemon

npm i nodemon -s

nodemon ./bin/www

express+ejs开发方法：

gulp+browser-sync+gulp-nodemon

browser-sync：同步更新浏览器

gulp-nodemon：gulp版的nodemon

安装包走起：

npm i gulp -s
npm i browser-sync -s
npm i gulp-nodemon -s

新建gulpfile.js文件

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    nodemon = require('gulp-nodemon');
gulp.task('default', function () {
    var files = [
        'views/**/*.ejs',
        'db/**/*.js',
        'routes/**/*.js',
        'models/**/*.js',
        'public/**/*.*'
    ]
    browserSync.init(files, {
        proxy: 'http://localhost:3000',
        browser: 'chrome',
        notify: false,
        port: 4001
    });
    var stream = nodemon({
        script: './bin/www',
        ext: 'js html',
        env: {
            'NODE_ENV': 'development'
        }
    })
    stream.on('restart', function () {
        browserSync.reload();
    })
    gulp.watch('views/**/*.ejs').on("change", function () {
        browserSync.reload();
    });

控制行运行gulp即可