Question

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

观看文件更改
在完成后编译TypeScript：
重新启动Express App，完成后：
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（＆＃34;重新启动！＆＃34;）;

我添加了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。

奖金问题 只用Shell脚本就可以在没有Gulp的情况下解决问题吗？与命令行TSC命令相比，gulp版本需要很长时间才能编译。

Answer 1

编译typescript和tsx（反应jsx），浏览器化，缩小捆绑包，并在前端更改时重新加载浏览器。

将打字稿编译为js，重启服务器并在后端更改时重新加载浏览器。

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

这就是你所需要的一切。

The gulpfile.js。

干杯，kataras。

如何配置Gulp for，typescript live-reload express

1 个答案: