如何为配置Gulp,typescript实时重载express

How to configure Gulp for, typescript live-reload express

本文关键字:typescript 实时 重载 express Gulp 配置      更新时间:2023-09-26

我正在尝试创建以下工作流:

  1. 监视文件更改
  2. 编译TypeScript,完成后:
  3. 重新启动Express应用程序,完成后:
  4. LiveReload浏览器

这是我目前的方法:

gulp.task('default', function() {
   //1. run your script as a server
   var server = gls.new('./bin/www');
   server.start();
   gulp.watch('./**/*.js', function(file) {
      var promise = server.start.bind(server)(); //restart my server
          promise.then(function(result) {
             console.log("restarted!");
             setTimeout( function() { 
                server.notify.apply(server, [file]);
             }, 500);
          });
    });
});

这一直工作到console.log("重新启动!")

我添加了setTimeout,因为重新加载将在服务器启动之前发生。但有了它,什么都不会发生,根本不会重新加载。


编辑

这里是我的第一个工作解决方案:

var gulp = require('gulp'),
    nodemon = require('gulp-nodemon'),
    livereload = require('gulp-livereload'),
    ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('typescript', function() {
   console.log('Compiling TypeScript');
    var tsResult = tsProject.src({base: './'}) 
        .pipe(ts(tsProject));
    return tsResult.js.pipe(gulp.dest('./'));
});
gulp.task('serve', ['typescript'], function () {
    gulp.watch('./**/*.ts', ['typescript']);
    livereload.listen();
    nodemon({
        script: './bin/www',
        ext: 'js',
    }).on('restart', function () {
        setTimeout(function () {
            console.log("reload!");
            livereload.reload();
        }, 500);
    });
});

但我仍然很想摆脱那个丑陋的setTimeout。

奖金问题有没有可能在没有Gulp的情况下,只使用一个Shell脚本来解决同样的问题?与命令行TSC命令相比,gump版本需要很长时间才能编译。

编译typescript和tsx(react jsx),浏览,缩小捆绑包,并在前端更改时重新加载浏览器。

将typescript编译为js,重新启动服务器,并在后端更改时重新加载浏览器。

Gulp 4 Typescript+React+JSX+Browserify+Seperate Frontend Watch+Nodemon+Livereload

这就是你所需要的。

gullfile.js.

干杯,武士刀。