观察，重新编译并重新启动

Question

我一直在寻找一种使用Grunt的手表模块来执行文件更改时执行几个步骤的方法的示例。我还没有找到这方面的一个很好的例子，所以如果有人能指出我会朝着正确的方向发展，那将是非常棒的。

1. 构建打字稿项目（我有这方面的工作）
2. 文件更改观看目录（这个工程太）
3. 开始运行编译的JavaScript中的一个节点的过程，而还在观望是否有文件更改（什么是通过Grunt做到这一点的最佳方式？手表模块似乎启动了重新编译任务OK）
4. 在文件更改时，停止其他正在运行的进程，重新编译并在完成时重新启动。继续观察变化（不知道这一个 - 重新启动是棘手的部分！）

我已经尝试了几种不同的方式，如开始与Grunt子进程，但我总是以悬挂进程结束，锁定端口，误导STDIO或其他问题。如果Grunt进程退出，我希望子进程被杀死。

有没有很好的方法来处理这个问题？谢谢！

Answer 1

我最终不得不用自己的孩子进程。 Nodemon将阻止监测发生，并且不够灵活以处理重新编译步骤。

这是我的Gruntfile，使用watch，copy，clean和TypeScript模块。

var loader = require('load-grunt-tasks'); 
var cp = require('child_process'); 

module.exports = function (grunt) { 
    loader(grunt, {}); 

    grunt.initConfig({ 
    tsFiles: [ 
     "**/*.ts", 
     "!typings/**/*.ts", 
     "typings/tsd.d.ts", 
     "!build/**/*.ts", 
     "!bower_modules/**/*.ts", 
     "!node_modules/**/*.ts", 
    ], 
    buildDir: 'build/', 

    clean: { 
     build: '<%= buildDir %>' 
    }, 

    ts: { 
     build: { 
     src: [ 
      "**/*.ts", 
      "!typings/**/*.ts", 
      "typings/tsd.d.ts", 
      "!build/**/*.ts", 
      "!bower_modules/**/*.ts", 
      "!node_modules/**/*.ts", 
     ], 
     outDir: '<%= buildDir %>', 
     options: { 
      "target": 'ES5', 
      "module": 'commonjs', 
      "sourceMap": true, 
     } 
     } 
    }, 

    copy: { 
     build: { 
     expand: true, 
     cwd: './', 
     src: [ 
      '*.json', 
      'config/**/*.json', 
      'test/**/*.js' 
     ], 
     dest: '<%= buildDir %>/', 
     filter: 'isFile' 
     } 
    }, 

    watch: { 
     run: { 
     files: [ 
      '**/*.ts', 
      '**/*.js', 
      '**/*.json', 
      '!.*/**/*.*', 
      '!build/**/*.*', 
      '!node_modules/**/*.*', 
      '!logs/**/*.*' 
     ], 
     tasks: ['server-stop', 'build', 'server-restart'], 
     options: { 
      spawn: false 
     } 
     } 
    } 
    }); 

    var child = null; 
    function killChild(){ 
    if (child){ 
     child.kill(); 
     child.disconnect(); 
     child = null; 
    }  
    } 

    grunt.registerTask('server-stop', 'Stop the dev server', function(){ 
    killChild(); 
    }); 

    grunt.registerTask('server-restart', 'Stop the dev server', function(){ 
    killChild(); 
    child = cp.fork('./build/app.js'); 
    }); 

    grunt.registerTask('build', ['copy', 'ts']); 
    grunt.registerTask('rebuild', ['clean', 'build']); 
    grunt.registerTask('default', ['rebuild']); 
    grunt.registerTask('run', ['default', 'server-restart', 'watch']); 
}; 

Answer 2

开始运行编译的JavaScript中的一个节点的过程，同时还对文件的变化看（什么是通过咕噜声做到这一点的最好方法是什么？表模块似乎揭开序幕，重新编译任务OK）

使用类似于Nodemon的东西：https://www.npmjs.com/package/nodemon它也有grunt/gulp软件包。

在文件变更，停止其他正在运行的进程，重新编译，并完成

Nodemon时，将停止对改变JS并重新启动应用程序重新启动。

Answer 3

这是我的解决方案。我有一个nodemon，它监视src文件夹，并在看到变化时触发构建循环+节点调用。它被称为使用yarn run dev:src。这是一个非常简单的解决方案：

package.json

"scripts": { 
    ... 
    "build:dev": "yarn run clean && yarn run compile:dev", 
    "clean": "rimraf dist", 
    "compile": "babel src -d dist && yarn run copy:static", 
    "compile:dev": "babel src -d dist -s && yarn run copy:static", 
    "copy:static": "cp -R src/static dist/static", 
    "dev:dist": "yarn run build:dev && node --inspect dist/server.js", 
    "dev:src": "yarn run build:dev && nodemon --watch src --exec yarn run dev:dist", 
} 

注：如果你喜欢使用NPM在yarn，你完全可以交换两个。我建议无论你要考虑纱;）

Answer 4

我简单通过使用nodemon观看的TS文件的更改src和编译与TSC打字稿/ TS文件的package.json的配置实现...

“脚本”部分从包。JSON：

"scripts": { 
    "debug": "nodemon -e js,ts --watch src --exec \"yarn run build:ts && yarn run start:app\"", 
    "build:ts": "node_modules/.bin/tsc", 
    "start:app": "node dist/app" 
    }, 

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es6", 
    "module": "commonjs", 
    "outDir": "dist" 
    }, 
    "include": [ 
    "src/**/*.ts" 
    ], 
    "exclude": [ 
    "node_modules" 
    ] 
}