Javascript 如何使用'；手表'；在我的npm脚本中？

我有以下目录结构：

我的

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 service

，这将执行以下操作：

运行html浏览器

运行节点sass

运行映像最小值

运行http服务器

最后，查看我的

src

文件夹中的所有内容并运行 文件更改时的相应脚本，例如

节点sass

等

---

我如何才能最好地解决这个问题？

对于这个脚本化的案例，最广泛采用的工具是吞咽或咕哝。它们是您经常会遇到的工具。您还可以找到minify/concat/copy/imagemin的grunt/gulp lib，以及watcher lib，以便在更改代码时更改它们。Nodemon/forever/pm2具有监视功能，可以重新启动http服务器

您可以使用来监视目录

一个解决方案是创建三个监视脚本，每个任务一个：

• 监视：节点sass

• watch:html minifier

  ，以及

• 监视：imagemin

然后用一个中心脚本

watch

启动三个：

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

---

另请阅读：。

我建议

一旦更改

，请参阅样板文件

比如说,

"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",

或

---

不需要咕噜声或咕噜声

你有没有考虑过使用gulp来完成这项任务？谢谢@Handonam，不过我想澄清一下，不使用grunt或gulp就可以完成我想做的事情，对吗？它认为这些工具只是不必要的中间人，对于一个简单的build.Use“来说是多余的，而不是”至少在Windows中是“watch:html”：“onchange\”src/*.html\“\”src/templates/headTemplate.html\”--npm run htmlTempl“。它不适用于单引号。请记住do install onchange:npm install onchange这应该是可接受的答案。简单的图书馆，花了我1分钟去做我期待的事情！注意：onchance不支持运行多个命令。因此，您可以设置一个BASH脚本来运行，该脚本执行所有服务器终止、重新启动等操作。

"watch:js": "onchange 'src/js/*.js' -- npm run build:js",