Javascript 如何在我的 npm 脚本中使用“监视”？

How can I use 'watch' in my npm scripts?

提问by revelt

I have the following directory structure:

我有以下目录结构：

And my package.jsonlooks like this:

我的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"
  }
}

So firstly, I have to run each of these scripts individually e.g. npm run node-sassor npm run html-minifieretc. What I'd ideally want is to run npm servewhich will do the following:

所以首先，我必须单独运行这些脚本中的每一个，例如npm run node-sass或npm run html-minifier等等。我最想要的是运行npm serve它将执行以下操作：

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

1. 运行 html-minifier
2. 运行 node-sass
3. 运行运行图像分钟
4. 运行 http 服务器
5. 最后，观察我src文件夹中的所有内容，并在文件更改时运行相应的脚本，例如node-sass等。

How can I best tackle this problem?

我怎样才能最好地解决这个问题？

回答by Mehdi

You can watch your directories using nodemon.

您可以使用nodemon.

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

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

• watch:node-sass,
• watch:html-minifier, and
• watch:imagemin.

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

Then have a central script watchstarting the three:

然后有一个中央脚本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"
  }
}

Read also: How to Use npm as a Build Tool.

另请阅读：如何使用 npm 作为构建工具。

回答by revelt

I advise onchange, see thisboilerplate.

我建议onchange，看这个样板。

For example,

例如，

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

or

或者

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

No Grunt or Gulp needed!

不需要咕噜声或吞咽！

回答by Handonam

The most widely adopted tools for this scripted case is to go with gulp or grunt. They are tools that you will encounter very often. You can also find their grunt/gulp libs for your minify/concat/copy/imagemin, as well as watcher libs so they change as you make changes to code. Nodemon/forever/pm2 have watch capabilites to restart your http server as well

对于这种脚本化案例，最广泛采用的工具是 gulp 或 grunt。它们是您经常会遇到的工具。您还可以为您的 minify/concat/copy/imagemin 找到他们的 grunt/gulp 库，以及观察者库，以便在您更改代码时更改它们。Nodemon/forever/pm2 也有监视功能来重启你的 http 服务器