我一直在寻找一个使用Grunt的watch模块在文件更改时执行几个步骤的示例。我还没有找到任何好的例子，所以如果有人能指导我正确的方向，那就太棒了。
我尝试了几种不同的方法，例如使用Grunt启动子进程，但我总是会遇到悬挂进程、锁定端口、错误的STDIO或其他问题。我希望如果Grunt进程退出，子进程可以被杀死。
有没有一个好的处理方式？谢谢！
"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"
]
}
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",
}
编辑：
这是一种过时的技术选择。我知道这可能超出了范围，但我建议采用类似这样的webpack/rollup方法：
"scripts": {
"start": "node build/index.js",
"build": "webpack",
"dev": "cross-env NODE_ENV=development nodemon --watch src --watch package.* --watch .env --watch .env.development --watch .env.development.local --watch webpack.config.js --exec \"npm run build && node build/index.js\"",
"lint": "eslint ./src --ext .js && prettier --check ./src/**/*{.js,.mjs}",
"lint:fix": "eslint ./src --ext .js --fix && prettier --write ./src/**/*{.js,.mjs}",
},
"scripts": {
"start": "node .",
"build": "babel --delete-dir-on-start --out-dir dist --copy-files --ignore \"**/__tests__/**,**/__mocks__/**\" --no-copy-ignored src"
}
最终我不得不使用子进程自己实现。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']);
};