如何在npm脚本中使用“监视"? [英] How can I use 'watch' in my npm scripts?

问题描述

我具有以下目录结构:

我的 package.json 看起来像这样:

{
  "name": "personal_site",
  "version": "1.0.0",
  "description": "My personal website.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
    "html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
    "imagemin": "imagemin src/images dist/images",
    "serve": "http-server ./dist"
  },
  "author": "Dean Gibson",
  "license": "ISC",
  "dependencies": {
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.4",
    "normalize-scss": "^4.0.3"
  },
  "devDependencies": {
    "html-minifier": "^1.3.0",
    "http-server": "^0.9.0",
    "node-sass": "^3.4.2"
  }
}

因此，首先，我必须分别运行每个脚本，例如 npm run node-sass 或 npm run html-minifier 等.我理想上想要的是运行 npm serve ，这将执行以下操作:

So firstly, I have to run each of these scripts individually e.g. npm run node-sass or npm run html-minifier etc. What I'd ideally want is to run npm serve which will do the following:

1. 运行html-minifier
2. 运行node-sass
3. 运行run image-min
4. 运行http服务器
5. 最后，观看我的 src 文件夹中的所有内容并运行文件更改时相应的脚本，例如 node-sass 等.

1. run html-minifier
2. run node-sass
3. run run image-min
4. run http-server
5. Lastly, watch everything in my src folder and run the respective scripts as files change e.g. node-sass etc..

我该如何最好地解决这个问题?

How can I best tackle this problem?

推荐答案

您可以使用 nodemon .

You can watch your directories using nodemon.

一个适合您的解决方案是创建三个监视脚本，每个任务一个:

One solution for you is to create three watch scripts, one for each task:

• watch:node-sass ，
• watch:html-minifier 和
• watch:imagemin .

然后有一个中央脚本 watch 从三个开始:

Then have a central script watch starting the three:

{
  "name": "personal_site",
  "version": "1.0.0",
  "description": "My personal website.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
    "html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
    "imagemin": "imagemin src/images dist/images",
    "serve": "http-server ./dist",
    "watch:node-sass": "nodemon -e scss -x \"npm run node-sass\"",
    "watch:html-minifier": "nodemon -e html -x \"npm run html-minifier\"",
    "watch:imagemin": "nodemon --watch src/images -x \"npm run imagemin\"",
    "watch": "npm run watch:node-sass & npm run watch:html-minifier & npm run watch:imagemin"
  },
  "author": "Dean Gibson",
  "license": "ISC",
  "dependencies": {
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.4",
    "normalize-scss": "^4.0.3"
  },
  "devDependencies": {
    "html-minifier": "^1.3.0",
    "http-server": "^0.9.0",
    "node-sass": "^3.4.2"
  }
}

另请阅读:如何使用npm作为构建工具.

这篇关于如何在npm脚本中使用“监视"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！