一、执行原理

安装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 用法详解

二、npm scripts的更多相关文章

  1. npm scripts 助力前端开发,实时刷新浏览器

    用browser-sync或者lite-server来监控文件的改变,当文件改变时,就自动刷新浏览器. 用node-sass来实时编译scss文件. 用parallelshell来异步执行npm sc ...

  2. npm scripts 使用指南

    转载自:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html Node 开发离不开 npm,而脚本功能是 npm 最强大.最常用的功能之一. ...

  3. npm scripts 脚本基础指南

    什么是npm脚本? npm 允许在package.json文件里面,使用scripts字段定义脚本命令. 初始化package.json -> npm init -> 经历一系列的问答即可 ...

  4. npm Scripts使用教程【译】

    Why npm Scripts? 原文发表于 2016.2.12,原文地址: https://css-tricks.com/why-npm-scripts/ 以下是访客Damon Bauer发布的一篇 ...

  5. npm scripts + webpack 实践经验(React、Nodejs)

    最近用Webpack+npm scripts+Mongodb+Nodejs+React写了个后台项目,在用Webpack构建过程中遇到了许多坑,就写出来分享一下. 构建工具五花八门,想当年刚学会Gru ...

  6. windows下npm scripts不能执行的问题

    最近在学webpack为了方便把运行脚本写入package.json文件中,如下: "scripts": { "start": "webpack-de ...

  7. 5.npm scripts 使用指南

    简单介绍 scripts里面的 "start": "node app" npm run start 相当于 node app { "name" ...

  8. 我为何放弃Gulp与Grunt,转投npm scripts(上)

    本文来源于我在InfoQ中文站翻译的文章.原文地址是:http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1 Cory Ho ...

  9. NPM Scripts 2 -- rimraf copyfiles imagemin usemin htmlmin uglifyjs

    NPM Scripts Part 2 Objectives and Outcomes In this exercise you will learn to build a distribution f ...

随机推荐

  1. js 编辑数组

    删除数组第一个元素使用var length = arr.shift(); 删除arr的第一个元素后, 返回值是删除后的数组长度           删除数组最后一个元素使用var length = a ...

  2. IntelliJ IDEA 导入Spring源码

    第一步: 使用git 拉取代码 git 命令: git init    //创建git仓库 git clone  https://github.com/spring-projects/spring-f ...

  3. excel数据表透视操作

    虽然作为开发人员,很少用到office,但是在工作的时候,特别是做财务模块,或多或少都会用到excel处理数据,对比数据.比如说vlookup函数,数据透视表这些.vlookup函数我用得很熟练,但数 ...

  4. BSOJ 4062 -- 【清华集训2012】串珠子

    Description 铭铭有n个十分漂亮的珠子和若干根颜色不同的绳子.现在铭铭想用绳子把所有的珠子连接成一个整体. 现在已知所有珠子互不相同,用整数1到n编号.对于第i个珠子和第j个珠子,可以选择不 ...

  5. 【转】wamp出现You don’t have permission to access/on this server提示

    本地搭建wamp,输入http://127.0.0.1访问正常,当输入http://localhost/,apache出现You don't have permission to access/on ...

  6. day1 计算机组成、操作系统

    一:编程与编程的目的 1.什么是语言?什么是编程语言? 语言是一个事物与另一个事物沟通的介质. 编程语言是程序员与计算机沟通的介质. 2.什么是编程?为什么要编程? 编程是程序员将自己想要让计算机做的 ...

  7. TFT2.0液晶屏幕测试

    型号 尺寸:2.0寸 驱动芯片: ILI9225 分辨率:176*220 SPI 板载3.3v电平转换,直接插在arduino上可用. 安装这个库 这个库默认是 uno 板子的,如果换成mega256 ...

  8. 项目Alpha冲刺4

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第四天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  9. 记一次InputStream引起的乱码

    项目上线一周后,正准备看新闻的我突然接到了一个任务.线上突然出现了一条乱码的数据,需要解决这个bug.于是我放下了手中的保温杯,开始解决这个bug.经过一番折腾,发现是有一个同事在处理IO流上写得有点 ...

  10. Gulp压缩前端CS,JS,图片文件

    Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass.less).压缩.图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩 ...