我怎样才能使用' watch'在我的npm脚本中?

时间:2016-03-27 08:36:29

标签: javascript node.js npm

我有以下目录结构:

enter image description here

我的Installed看起来像这样:

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以执行以下操作:

  1. 运行html-minifier
  2. 运行node-sass
  3. run run image-min
  4. 运行http-server
  5. 最后,观看我npm serve文件夹中的所有内容并运行 作为文件的各个脚本改变例如src等。
  6. 我怎样才能最好地解决这个问题?

3 个答案:

答案 0 :(得分:20)

您可以使用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"
  }
}

另请阅读:How to Use npm as a Build Tool

答案 1 :(得分:14)

我建议onchange,请参阅this样板文件。

例如,

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

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

不需要Grunt或Gulp!

答案 2 :(得分:-1)

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