如何为打字机实时重载快递配置Gulp

Question

I am trying to create the following workflow:

1. Watch File Changes
2. Compile TypeScript, after that is complete:
3. Restart Express App, after that is complete:
4. LiveReload Browser

Here is my current approach :

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);

          });
    });
});

This works up to console.log("restarted!");

I added the setTimeout since the reload would happen before teh server has been started. But with it nothing happens no reload at all.

---

EDIT

Here my first working solution:

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);
    });

});

But I still would love to get rid of that ugly setTimeout.

Bonus Question Is it possible to solve the same without Gulp with just a Shell Script ? Compared to the command line TSC command the gulp version takes ages to compile.

Answer 1

Compile typescript and tsx (react jsx), browserify, minified the bundle, and reload the browser on frontend changes.

Compile typescript to js, restart the server and reload browser when Backend changes.

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

That's all you will need.

The gulpfile.js .

Cheers, kataras.