一、执行原理

安装npm 包，会将其package.json bin 字段添加到node_modules bin 里面，创建对应的.cmd文件，因此：

例如：

"scripts":{ "test": "mocha" }npm run test => 等同于

./node_modules/.bin/mocha然后：依旧是通过node 调用包bin字段对应的文件bin 文件第一行 #!/usr/bin/env node

二、传入参数

"scripts":{ "test": "mocha --reporter spec" }在 shell 中传入的参数都要使用 -- 隔开，这个 -- 被视作 npm run 命令参数的结束，-- 后面的内容都会原封不动地传给运行的命令。

三、通配符

"lint": "jshint *.js"
"lint": "jshint **/*.js"

*表示任意文件名，**表示任意一层子目录。四、执行顺序1.并行

$ npm run script1.js & npm run script2.js

继发执行（即只有前一个任务成功，才执行下一个任务

$ npm run script1.js && npm run script2.js

五、变量

npm 脚本有一个非常强大的功能，就是可以使用 npm 的内部变量。

{"name": "foo", "version": "1.2.5", "scripts": { "view": "node view.js" } }

// view.js
console.log(process.env.npm_package_name); // foo console.log(process.env.npm_package_version); // 1.2.5

六、常用脚本

// 删除目录
"clean": "rimraf dist/*",  // 本地搭建一个 HTTP 服务 "serve": "http-server -p 9090 dist/",  // 打开浏览器 "open:dev": "opener http://localhost:9090",  // 实时刷新 "livereload": "live-reload --port 9091 dist/",  // 构建 HTML 文件 "build:html": "jade index.jade > dist/index.html",  // 只要 CSS 文件有变动，就重新执行构建 "watch:css": "watch 'npm run build:css' assets/styles/",  // 只要 HTML 文件有变动，就重新执行构建 "watch:html": "watch 'npm run build:html' assets/html",  // 部署到 Amazon S3 "deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",  // 构建 favicon "build:favicon": "node scripts/favicon.js",

参考：

npm scripts 使用指南

为什么使用 npm Scripts 构建项目

npm script 用法详解

转载于:https://www.cnblogs.com/shangyueyue/p/10034225.html

二、npm scripts相关推荐

（25）npm scripts 实践—构建脚本文件
一.先来看2张对比图通过如下2个图片,我们看到,我们应该构建好以后再进行浏览器中运行.没有构建前是ES6的箭头函数写法,我们要转换成ES5的写法然后再运行.为什么要构建?因为ES6再某些浏览器是不支 ...
（21）npm scripts 实现自动化构建的最简方式
一.什么是 npm scripts npm 允许在 package.json 文件中,使用 scripts 字段定义脚本命令. 二.npm scripts 自定义脚本命令三.自动化构建样式文件四. ...
（22）npm scripts 实践—构建样式文件
将 less 转成 css 安装less命令:npm i less -g 转换命令:lessc input.less output.css 压缩 css 文件安装压缩包命令:npm i minify ...
npm scripts
实现自动化构建的最简方式什么是 npm scripts • npm 允许在 package.json 文件中,使用 scripts 字段定义脚本 npm scripts 自定义脚本命令 1. 声明命 ...
npm scripts的生命周期管理
2019独角兽企业重金招聘Python工程师标准>>> 我们平时阅读一些开源项目,可能会发现有些项目的package.json里的scripts区域定义的脚本很复杂,令人眼花缭乱. ...
npm scripts详解
前言这个主题之前有分享过的,不过没有今天这么基础,本文由@yangfch3带来的分享,比较偏原理跟实践性. 正文从这开始- npm 不仅可以用于模块管理,还可以用于执行脚本. package.j ...
npm scripts中run serve命令详解
闲来无事,分析npm run serve会发生哪些事情,一分析,发现其中有很大的奥妙. 1.首先npm run serve 会在package.json文件中寻找scripts中的 serve属性(有 ...
webpack4.0打包优化策略(二)
打包优化策略 webpack4.0打包优化策略(一) webpack4.0打包优化策略(二) webpack4.0打包优化策略(三) 区分开发和生产环境通常我们在开发网页时需要区分构建环境开发环境 ...
iview admin npm install报错_聊聊NPM镜像那些险象环生的坑
作者:JowayYoung 仓库:Github.CodePen 博客:掘金.思否.知乎.简书.头条.CSDN 公众号:IQ前端联系我:关注公众号后有我的微信哟特别声明:原创不易,未经授权不得对此文 ...
尤雨溪推荐神器 ni ，能替代 npm/yarn/pnpm ？简单好用！源码揭秘！
1. 前言大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 想学源码,极力推荐之前我写的<学习源码整体架构系列>jQuery.underscore.l ...

二、npm scripts

npm scripts 使用指南

为什么使用 npm Scripts 构建项目

npm script 用法详解

二、npm scripts相关推荐

最新文章

热门文章