使用npm脚本同时启动多个监听服务的技巧

在构建一个以静态页面为主的网站时，如果使用Vue或React显得有些大材小用，而纯HTML/CSS/JS又不够灵活。因此，我们选择通过npm手动搭建一个简单的本地开发环境，以满足以下需求：

• 启动HTTP服务，并自动打开浏览器；
• 实现浏览器自动刷新，当源码发生变化时，浏览器内容自动更新；
• 支持Sass语法，将Sass代码实时转换为CSS；
• 支持ES6语法，使用Babel将ES6代码转换为ES5。

为了实现这些功能，我们可以在项目中安装并配置以下工具：

• 通过live-server实现HTTP服务和自动浏览器刷新；
• 通过node-sass实现Sass语法支持；
• 通过babel-cli实现ES6语法支持。

接下来，我们将这些命令配置到package.json中的scripts字段中：

"scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "start": "sass --watch pc/static/scss:pc/static/css mobile/static/scss:mobile/static/css --sourcemap=none && live-server --port=1208 && babel pc/static/es6-js -d pc/static/js --watch && babel mobile/static/es6-js -d mobile/static/js --watch && echo 好好工作!"}

然而，在运行时发现了一个问题：使用&&连接的命令会按顺序执行，一旦遇到类似sass --watch这种“阻塞”命令，后续命令将无法执行。

为了解决这个问题，我们可以使用concurrently工具。它允许并发执行多个命令，确保所有服务都能正常启动。具体步骤如下：

• 安装concurrently：npm install concurrently --save-dev；
• 修改package.json中的scripts字段：

"scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "start": "concurrently \"sass --watch pc/static/scss:pc/static/css mobile/static/scss:mobile/static/css --sourcemap=none\" \"live-server --port=1208\" \"babel pc/static/es6-js -d pc/static/js --watch\" \"babel mobile/static/es6-js -d mobile/static/js --watch\" \"echo 好好工作!\""}

现在，只需在项目目录下运行npm start即可启动所有服务。这样不仅简化了操作流程，还提高了开发效率。

总结：
通过使用concurrently工具，我们能够轻松地在本地开发环境中并行启动多个监听服务，从而提升开发体验。希望本文能对您有所帮助，如果您有任何疑问，请随时留言交流。