How can I use 'watch' in my npm scripts? : <p>I have the following directory structure:</p>

<p><a href="https://i.stack.imgur.com/0yvkT.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/0yvkT.jpg" alt="enter image description here"></a></p>

<p>And my <code>package.json</code> looks like this:</p>

<pre><code>{
  "name": "personal_site",
  "version": "1.0.0",
  "description": "My personal website.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; 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"
  }
}
</code></pre>

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

<ol>
<li>run html-minifier </li>
<li>run node-sass </li>
<li>run run image-min </li>
<li>run http-server  </li>
<li>Lastly, watch everything in my <code>src</code> folder and run
the respective scripts as files change e.g. <code>node-sass</code> etc..</li>
</ol>

<p>How can I best tackle this problem?</p>
