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

Question

我有以下目录结构：

我的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它将执行以下操作：

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

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

Answer 1

您可以使用nodemon查看您的目录。

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

• watch:node-sass ，
• watch:html-minifier ，和
• watch: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"
  }
}

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

Answer 2

我建议onchange ，请参阅此样板。

例如，

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

或

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

不需要咕噜声或吞咽！

Answer 3

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