（21）npm scripts 实现自动化构建的最简方式
一、什么是 npm scripts
npm 允许在 package.json 文件中，使用 scripts 字段定义脚本命令。
二、npm scripts 自定义脚本命令
三、自动化构建样式文件
四、npm scripts 中任务的执行方式
并行：多个任务一起执行。
串行：多个任务，单个执行，执行完一个再执行下一个。
自动化构建是将多个任务通过一条命令进行执行，成为生产代码，然后进行上线。
注意：& （并行执行）在 Windows 下不起作用。
npm-run-all 插件
五、示例
task1.js
setTimeout(() => {console.log('Task 1 is running'); }, 3000);task2.js
setTimeout(() => {console.log('Task 2 is running'); }, 2000);task3.js
setTimeout(() => {console.log('Task 3 is running'); }, 1000);package.json
快捷生成命令：npm init --yes，会省去书写问卷的时间{"name": "scripts","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","t1": "node task1.js","t2": "node task2.js","t3": "node task3.js","p": "run-p t1 t2 t3","s": "run-s t1 t2 t3"},"keywords": ["scrips"],"author": "田根旺","license": "ISC","devDependencies": {"npm-run-all": "^4.1.5"} }npm run s 运行结果
npm run p 运行结果
通过运行可以看出2个运行结果顺序是不一样的。
npm run p 结果是321
npm run s 结果是123
task1的是3000ms，task2的是2000ms，task3的是1000ms。
如果是并行那么是321，它是按照3个文件中task1的1000ms先执行，最后执行task3的3000ms。
如果是串行那么是123，是当1执行完以后，再去执行2。
（21）npm scripts 实现自动化构建的最简方式相关推荐
- npm scripts
实现自动化构建的最简方式 什么是 npm scripts • npm 允许在 package.json 文件中,使用 scripts 字段定义脚本 npm scripts 自定义脚本命令 1. 声明命 ...
- altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建
工程化笔记 . . 光 前端工程化简述 简述 一切能提升前端开发效率,提高前端应用质量的手段和工具都是前端工程化. 模块化,组件化,规范化,自动化. 解决的问题 传统语言或语法的弊端. 无法使用模块 ...
- 浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 前端自动化构建 基本介绍 一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
- 前端工程化——脚手架及自动化构建
定义 一切以提高效率.降低成本.质量保证为目的的手段,都属于工程化 前端工程化主要解决的问题 传统语言或语法的弊端 无法使用模块化/组件化 重复性的机械工作 代码风格统一.质量保证 依赖后端服务接口的 ...
- 前端工程化实战 - 自动化构建工具
文章目录 一.自动化构建简介 二.自动化构建初体验 2.1 场景描述 2.2 实际操作体验 三.常用的自动化构建工具 3.1 Grunt 3.2 Gulp 3.3 FIS 四.自动化构建工具 Grun ...
- maven（五）的自动化构建
自动化构建的目标: 在一个工程成功构建完成后,依赖该工程的其他工程可以自动构建. 自动化构建的两种方式: 方式1:在被依赖工程的pom中添加一个绑定在生命阶段packge之后的目标(goal)用于启动 ...
- 替代glup和grunt，使用npm自动化构建项目
本篇文章是对https://css-tricks.com/why-npm-scripts/该文的转载,但是发现其中一些错误,以及原文评论中的一些修改意见,故对文章内容进行修改和补充.我个人来说,还是推 ...
- webpack自动化构建脚本指令npm run dev/build
指令 为不同环境配置可执行指令,我们使用npm scripts方式,在package.json文件中配置执行指令: {"scripts": {"start": ...
- （25）npm scripts 实践—构建脚本文件
一.先来看2张对比图 通过如下2个图片,我们看到,我们应该构建好以后再进行浏览器中运行.没有构建前是ES6的箭头函数写法,我们要转换成ES5的写法然后再运行.为什么要构建?因为ES6再某些浏览器是不支 ...
最新文章
- android 之Activity间的相互跳转(通过intent构造函数)
- Mr.J-- jQuery学习笔记(十一)--事件委托
- php 返回索引,PHP mySQL - 你能否返回帶有數字索引的關聯數組？
- java字符串的替换replace、replaceAll、replaceFirst的区别详解
- 每日算法系列【LeetCode 827】最大人工岛
- 「10」民主投票法——KNN的秘密
- redis 配置文件配置
- PCB中 D-Subminiature（DB接口） 连接器系列分类及带有3D封装绘制
- 财务分析真不难！无需代码，一个模板直接复用，碾压上千Excel表
- 计算机无法用630打印机,手把手为你解决win10系统安装630k打印机驱动的设置方法...
- V模型、W模型、H模型示意图以及优缺点对比
- 设置Jenkins语言为中文或英文
- Android 意图(Intent)
- Java的Enum枚举反编译的结果（为什么它是一个枚举对象是一个单例）
- ST意法芯片：全球领先的半导体技术，你不能不知道！
- 开源模式让木马软件更疯狂
- 删除文件提示：正在准备 再循环
- 按键精灵官方教程分享
- 魔兽世界怀旧服哪个服务器bl最多,魔兽世界怀旧服选择什么服务器最好 各服务器优缺点汇总...
- 华为服务器密码忘记了怎么修改密码,云服务器密码忘记了怎么改