npm script命令同时进行多个监听服务的方法

最近在搭建一个静态页面偏多的网站, 用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命令, 然后通过命令行一键并行开启多个服务

以上所述是小编给大家介绍的npm script命令同时进行多个监听服务的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue3.0 CLI - 1 - npm 安装与初始化的入门教程

    node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹,创建项目. 如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 ) 选择 default 配置项,下面没什么可介绍的,自行尝试. 下面介绍选择 manually select fea

  • 用npm安装vue和vue-cli,并使用webpack创建项目的方法

    一.npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 二.在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ v

  • nodejs中用npm初始化来创建package.json的实例讲解

    1.先正确的安装nodejs这个软件,自己去百度一下,安装很简单 2.然后在安装的NodeJS目录下打开cmd,在里面输入命令npm init,会得到如下图所示: 3.按提示,一步步来完成项目文件的配置,没有的可以不写,直接enter,这样初始化时会创建默认的文件,最后创建完的目录如下所示: 4.完后输入yes或Y来对配置文件进行设置,这样在目录下就会生成这样一个package.json文件,如下图中所示: 5.打开package.json这个文件,可以看见我们对这个工程的配置文件信息,如下图中

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • 解决nodejs的npm命令无反应的问题

    最近在弄cordova,又要折腾nodejs了. 今天安装cordova模块的时候,看到nodejs的默认模块安装路径在c盘 于是想修改下,按命令 npm config set prefix . 结果就遇坑了,之后我的npm命令完全无反应,不是加载的那种状态 而是下标不停地在哪里闪... 之后找解决方案,说要删除npmrc文件. 强调:不是nodejs安装目录npm模块下的那个npmrc文件 而是在C:\Users\{账户}\下的.npmrc文件.... ok,可以使用npm命令了. 以上这篇解

  • Node.js npm命令运行node.js脚本的方法

    //通过npm运行node脚本 (控制台应用程序) cmd---cd package.json所在的目录---npm start (package.json中的scripts属性中设置start命令) cmd---npm (通过该命令可以查看npm后面能够设置的具体命令) package.json: { "scripts":{ "start": "node demo.js", // cmd环境中,npm start命令 就相当于 node dem

  • npm配置国内镜像资源+淘宝镜像的方法

    npm介绍 1.说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等): 2.使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]: 2.1.<name>:node插件名称.例:npm install gulp-less --save-dev 2.2.-g:全局安装.将会安装在C:\Users\Administrator\AppData\Roaming\

  • Vue 组件封装 并使用 NPM 发布的教程

    正文开始 Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni import UniSoftUI from 'unisoft-ui'; // 或者 const CustomUI = require('unisoft-ui'); // 或者 <script src="...">&

  • npm scripts 使用指南详解

    Node 开发离不开 npm,而脚本功能是 npm 最强大.最常用的功能之一. 本文介绍如何使用 npm 脚本(npm scripts). 一.什么是 npm 脚本? npm 允许在package.json文件里面,使用scripts字段定义脚本命令. { // ... "scripts": { "build": "node build.js" } } 上面代码是package.json文件的一个片段,里面的scripts字段是一个对象.它的每一

  • ndm:NPM的桌面GUI应用程序

    ndm:NPM的桌面GUI应用程序

    如果你熟悉ruby的gem,Python的pypi.setuptools,PHP的pear,那么你就知道NPM的作用是什么了. NPM 是 Node Package Manager (node 包管理器)的缩写,它是用于安装 NodeJS 软件包或模块的命令行软件包管理器.我们发布过一个指南描述了如何使用 NPM 管理 NodeJS 包.你可能已经注意到,使用 Npm 管理 NodeJS 包或模块并不是什么大问题.但是,如果你不习惯用 CLI 的方式,这有一个名为 NDM 的桌面 GUI 程序,

随机推荐