监视模板文件并将其复制到dist/文件夹

Question

我在我的项目中使用TypeScript，我可以成功地监视并编译 .ts 文件，并将其输出到 dist 文件夹。

这是我的 package.json 中的 scripts 部分:

"start": "npm run build && npm run watch",
    "build": "npm run build-ts && npm run tslint",
    "test": "cross-env NODE_ENV=test jest --watch",
    "watch": "concurrently -k -p \"[{name}]\" -n \"Typescript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve\"",
    "serve": "nodemon dist/server.js",
    "build-ts": "tsc",
    "watch-ts": "tsc -w",
    "tslint": "tslint -c tslint.json -p tsconfig.json"

问题是我想使用JS模板引擎(nunjucks)，并且需要监视views文件夹中的视图文件并将它们移动到dist文件夹。

• 是否有一种方法只使用npm脚本或nodejs？
• 还是我需要使用其他工具像gulp或webpack？

- Jaime Sangcap

Answer 1

我有一个与编写CRUD GraphQL后端服务器相关的“相同”请求，但不想使用gulp或webpack来保持简单。

我看到你像我一样使用nodemon。然后，根据https://github.com/remy/nodemon上的文档，它可以用于监视除默认的js文件以外的任何类型的文件更改。此外，nodemon还可以监视除node之外的其他事务服务器的状态。

第一项任务是检测所需文件的更改：在我的情况下，我想将*.gql文件从src/schema文件夹复制到build/schema文件夹中。为此，您可以使用ext来指定文件类型，watch选项来指定要探索的源文件夹。

第二个任务是复制文件的事情。当然，您可以使用主机操作系统的复制命令。在我的情况下，我使用Windows shell的DOS xcopy命令（或类Unix操作系统中的cp命令）。 nodemon具有“事件挂钩”和事件选项，可以在事件发生时执行命令行。当检测到nodemon的更改时，我们只需要使用节点服务器的restart事件即可。您可以使用命令行选项，全局配置文件或本地package.json项目配置文件。我展示了最后一个，使用package.json的nodemonConfig部分。

"nodemonConfig": {
  "watch": [
     "./src/schema",
     "./build"
  ],
  "ext": "js,gql",
  "events": {
     "restart": "xcopy .\\src\\schema\\*.gql .\\build\\schema /Y /O /R /F /I /V /E"
  }
}

- 0zkr PM

---

我不得不为graphql文件的目标添加一个“忽略”配置，以防止无限重启："ignore": ["./dist/schemas/**/*.graphql"]。 - tafty

Answer 2

Ozkr的答案很好，我想补充一下我的做法，因为nodemon会无限重启，所以我不得不稍微改变一下：

"nodemonConfig": {
"watch": [
   "./views",
   "./public"
],
"ext": "hjs,js",
"events": {
   "restart": "cp -r views dist \n cp -r public dist"
  }
}

- Anna Medyukh

Answer 3

复制并查看就是这样：

我在开发过程中使用这段代码来复制html文件：

"copy_html": "yarn copy-and-watch src/mail_templates/* prod/mail_templates --watch --clean",

- T. Dayya

Answer 4

OZk的回答很棒。在我的情况下，我只需要在package.json中添加nodemonConfig并监视src文件夹，什么都不用做了。它非常好用。

 "nodemonConfig": {
    "watch": [
      "./src"
    ],
    "ext": "ts,graphql,js"
  },

- mitch1009