npm script命令同时开启多个监听服务concurrently

简介: 最近在搭建一个静态页面偏多的网站, 用vue或React有点大材小用,使用纯html / css / js 又不好用, 于是就用npm手动搭建一个简单的本地开发环境, 本地环境要实现几个基本功能在本地开启http服务; 且开启服务后, 会自动打开...

最近在搭建一个静态页面偏多的网站, 用vue或React有点大材小用,使用纯html / css / js 又不好用, 于是就用npm手动搭建一个简单的本地开发环境, 本地环境要实现几个基本功能

  • 在本地开启http服务; 且开启服务后, 会自动打开浏览器
  • 浏览器自动刷新; 源码变化后, 浏览器会自动刷新显示内容
  • 支持sass语法; 将sass代码实时转换为css
  • 支持es6语法; 使用babel将es6转换为es5
  • 开启http服务, 自动开启浏览器, 实现浏览器自动刷新的实现思路是,在项目内用npm安装live-server
  • 支持sass语法的实现思路是, 用npm安装node-sass
  • 支持es6语法的实现思路是, 用npm安装babel, babel-cli

目前看来一切完美

我们把几个命令配置到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 pc/static/scss:pc/static/css --watch 这种"阻塞"的命令, 后面的命令将会无法执行...

解决方法: 用concurrently


https://www.npmjs.com/package/concurrently

concourrently的作用就是让"阻塞"的命令, 可以并发执行, 我们改写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提供了很有用的功能, 有了concurrently我们可以通过npm install在项目内安装多个服务,然后配置package.json内的script命令, 然后通过命令行一键并行开启多个服务

目录
相关文章
|
6天前
npm info 命令的用途
npm info 命令的用途
43 0
|
6天前
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
详细介绍NPM的基本使用方法、常用命令和一些实用技巧
详细介绍NPM的基本使用方法、常用命令和一些实用技巧
132 0
|
6天前
|
Ubuntu
node、npm 命令升级
node、npm 命令升级
|
6天前
|
JavaScript
node.js 项目中执行 npm install 命令后看到的 idealTree inflate 的含义
node.js 项目中执行 npm install 命令后看到的 idealTree inflate 的含义
247 0
|
6天前
|
JavaScript 前端开发 Shell
NPM 自定义 package.json 中 scripts 命令(& 与 && 的区别,cross-env 的使用)
NPM 自定义 package.json 中 scripts 命令(& 与 && 的区别,cross-env 的使用)
44 0
|
5天前
|
JavaScript Unix Shell
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
9 0
|
6天前
npm的一些常用命令和被墙问题的解决
npm的一些常用命令和被墙问题的解决
|
6天前
|
存储 缓存 JavaScript
npm命令完整使用指南
本文介绍了npm命令的使用,包括安装配置、镜像源设置、初始化配置文件和下载模块。在安装Node.js后,npm也随之配置好,可通过`npm -v`检查版本。更新npm使用`npm install npm -g`。配置镜像源可切换至淘宝源或恢复官方源。`package.json`文件记录项目依赖,使用`npm init`或`npm init -y`创建。下载模块时,`npm install`用于安装`dependencies`中的包。本地与全局安装、指定版本下载、下载多个包及清理缓存等命令也进行了说明。本文旨在帮助不熟悉npm的读者掌握其基本操作。
55 0
|
6天前
|
Windows
vscode 终端无法执行npm、cnpm命令的解决办法,npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试
vscode 终端无法执行npm、cnpm命令的解决办法,npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试
74 0

推荐镜像

更多