觀察，重新編譯並重新啓動

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" 
    ] 
}