Nodejs：如何把node-dev和gulp结合起来用？

Nodejs：如何把node-dev和gulp结合起来用？

不想起个gulp又单独起node-dev

想把node-dev写成gulp的task，但是npm上貌似没找到类似gulp-node-dev的东西

OR: 或者问题是这样，我想node-dev开发express的时候，改变app.coffee不仅server restart，而且还能让浏览器reload

跟进： 貌似gulp-nodemon可以解决我的问题。

5 回复

Nodejs：如何把node-dev和gulp结合起来用？

在Node.js开发中，我们经常需要同时使用node-dev来实现服务器重启功能，并且希望在文件发生变化时自动刷新浏览器。虽然没有直接名为gulp-node-dev的插件，但我们可以使用gulp-nodemon来实现这一目标。

解决方案

  1. 安装必要的依赖 首先，确保你已经安装了gulp和nodemon。如果还没有安装，可以通过以下命令进行安装：

    npm install --save-dev gulp nodemon

  2. 配置Gulp任务

    接下来，我们需要在gulpfile.js中配置gulp-nodemon来启动我们的Express应用，并设置一个监听任务来监视文件变化并自动刷新浏览器。

    const gulp = require('gulp');
const nodemon = require('gulp-nodemon');

// 启动nodemon服务
gulp.task('start', function () {
  nodemon({
    script: 'app.js', // 这里指定你的主应用文件
    ext: 'js coffee', // 指定要监视的文件扩展名
    env: { 'NODE_ENV': 'development' } // 设置环境变量
  })
  .on('restart', function () {
    console.log('Server restarted!');
  });
});

// 监听文件变化并刷新浏览器
gulp.task('watch', function () {
  gulp.watch(['app.js', '*.coffee'], gulp.series('start'));
});

// 默认任务
gulp.task('default', gulp.series('start', 'watch'));

  3. 运行Gulp任务

    在项目根目录下运行以下命令启动Gulp：

    npx gulp

    这将启动nodemon来监视你的应用文件，并在文件发生变化时自动重启服务器。同时，gulp-watch任务会监听这些变化，并重新运行start任务。

通过这种方式，你可以将node-dev的功能与gulp的自动化能力结合起来，提高开发效率。


我在 Cirru 里用的方案是 ShellJS + devtools-reloader-station … 如果有 server 的话, 也用一样的方式做. https://github.com/Cirru/cirru-table 其实就是用 ShellJS 自己写脚本的定制的意思了

怎么不用calabash+doodle了。我自己用的是gulp-livereload + gulp-nodemon和一些gulp的watch 不过gulp-nodemon虽然可以restart server，但是它监听restart事件却是在server restart之前触发的。略苦恼。

gulp-connect真不错，不过貌似不是我像要的 O.O

要将 node-dev 和 Gulp 结合起来使用，可以利用 gulp-nodemon 插件。gulp-nodemon 是 nodemon 的 Gulp 版本，它可以监听文件变化并重启 Node.js 服务器。这可以帮助你在修改文件时自动重启服务，并且你可以配置它来实现浏览器的自动刷新。

以下是如何结合使用 gulp-nodemon 和 browser-sync 来实现这一功能的示例：

安装必要的依赖

首先，你需要安装 gulp, gulp-nodemon 和 browser-sync：

npm install --save-dev gulp gulp-nodemon browser-sync

配置 Gulpfile.js

接下来，在你的项目中创建或更新 Gulpfile.js，添加一个任务来启动 nodemon 并同时启动 browser-sync 进行浏览器自动刷新。

const gulp = require('gulp');
const nodemon = require('gulp-nodemon');
const browserSync = require('browser-sync').create();

// 启动 nodemon 并监听 .js 和 .coffee 文件
gulp.task('nodemon', (cb) => {
    let started = false;
    return nodemon({
        script: 'app.js',
        watch: ['**/*.js', '**/*.coffee']
    }).on('start', () => {
        // 确保服务器只启动一次
        if (!started) {
            cb();
            started = true;
        }
    });
});

// 启动 browser-sync
gulp.task('browser-sync', ['nodemon'], () => {
    browserSync.init(null, {
        proxy: "http://localhost:3000", // 根据你的 Express 服务器端口进行调整
        files: ["public/**/*.*"], // 指定需要监视的文件路径
        browser: "google chrome",
        port: 7000,
    });
});

// 创建默认任务
gulp.task('default', ['browser-sync']);

解释代码

  • nodemon 任务: 监听 .js 和 .coffee 文件的变化，并重新启动服务器。
  • browser-sync 任务: 在 nodemon 任务启动之后，启动 browser-sync。这里我们通过代理方式连接到 nodemon 启动的服务（假设Express运行在 localhost:3000），并且监视特定目录下的文件变化以触发浏览器刷新。

通过这种方式，你可以在修改代码后看到服务器自动重启以及浏览器自动刷新的效果，而无需手动操作。

回到顶部