Question

我一直在寻找一种方法的示例，以便在发生文件更改时使用Grunt的监视模块执行几个步骤。我没有找到任何一个很好的例子，所以如果有人能指出我的方向是正确的。

构建TypeScript项目（我有这个工作）
观察文件更改的目录（这也有效）
在节点进程中开始运行已编译的JavaScript，同时仍然关注文件更改（通过Grunt执行此操作的最佳方法是什么？监视模块似乎启动了重新编译任务OK）
在文件更改时，停止其他正在运行的进程，重新编译，并在完成后重新启动。继续关注变化（不知道这个 - 重启是最棘手的部分！）

我尝试了一些不同的方法，例如使用Grunt启动子进程，但我总是最终处理悬空进程，锁定端口，错误的STDIO或其他问题。如果Grunt进程退出，我希望杀死子进程。

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

Answer 1

这是我的解决方案。我有nodemon监视src文件夹，并在看到更改时触发构建周期+节点调用。使用npm run dev:src调用它。这是一个非常简单的解决方案：

package.json

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

Answer 2

我的简单工具是通过config.json的配置使用nodemon来监视src的ts文件更改并使用tsc编译typescript / ts文件...

＆＃34;脚本＆＃34;来自package.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"
   ]
}

Answer 3

开始在节点进程中运行已编译的JavaScript，同时仍然关注文件更改（通过Grunt进行此操作的最佳方式是什么？手表模块似乎启动了重新编译任务OK）

使用类似Nodemon的东西：https://www.npmjs.com/package/nodemon还有grunt / gulp包。

在文件更改时，停止其他正在运行的进程，重新编译，并在完成后重新启动

Nodemon将停止对js的更改并重新启动应用程序。

Answer 4

我最终不得不使用子进程滚动自己。 Nodemon会阻止监视发生，并且不够灵活，无法处理重新编译步骤。

这是我的Grunt文件，使用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']);
};

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

4 个答案: