In this lesson we will look at pulling out complex npm script logic into an external JavaScript file. Instead of writing bash scripts you can leverage your JavaScript abilities to automate your build process. We’ll use some helper node modules such as shelljs, opn-cli, and babel-cli.

Install:

npm i -D shelljs babel-cli

From:

"test": "BABEL_ENV=test mocha spec/ --require babel-register",

To:

1. create a "scripts/test.js" file.

2. Add content:

import { exec } from "shelljs";

const isWindows = process.platform === "win32";
const environment = isWindows ?
"set BABEL_ENV=test&&" :
"BABEL_ENV=test"; exec( `${ environment } mocha spec/ --require babel-register` );

3. Change package.json

"test": "babel-node ./scripts/test.js",

From:

    "build": "npm-run-all build:*",
"prebuild": "rm -rf public/$npm_package_version",
"build:html": "pug --obj data.json src/index.pug --out public/$npm_package_version/",
"build:css": "node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css",
"build:js": "mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js",

To:

1. create "scripts/build.js".

2. Add content:

import { rm, exec } from "shelljs";

const version = process.env.npm_package_version;

rm( "-rf", `public/${ version }` );
exec( `pug --obj data.json src/index.pug --out public/${ version }/` );
exec( `node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/${ version }/index.min.css` );
exec( `mustache data.json src/index.mustache.js | uglifyjs > public/${ version }/index.min.js` );

3. Change package.json:

"build": "babel-node ./scripts/build.js",

From:

    "server": "npm-run-all --parallel server:*",
"server:create": "http-server public/$npm_package_version -p $npm_package_config_port",
"server:launch": "open http://localhost:$npm_package_config_port",

To:

1. Create "scripts/server.js".

2. Add content:

import { exec } from "shelljs";

const {
npm_package_version: version,
npm_package_config_port: port
} = process.env; exec( `http-server public/${ version } -p ${ port }`, { async: true } );
exec( `opn http://localhost:${ port }` );

3. Change package.json file:

"server": "babel-node ./scripts/server.js",

Be careful that in Windows single quote doesn't work, we need to replace single quote to

\"

[NPM] Create a node script to replace a complex npm script的更多相关文章

  1. [NPM] Create a bash script to replace a complex npm script

    In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. ...

  2. npm不能安装任何包,报错:npm WARN onload-script failed to require onload script npm-autoinit/autoinit及解决方法

    想要利用Hexo搭建一个博客,但是安装时npm一直报错,不仅仅是Hexo包,连别的其他包也不行,会提示下面的一堆错误 npm WARN onload-script failed to require ...

  3. npm ERR! Failed at the gff@1.0.0 start script.

    code ELIFECYCLE npm ERR! errno 1 npm ERR! gff@1.0.0 start: `node build/dev-server.js` npm ERR! Exit ...

  4. io.js - 兼容 NPM 平台的 Node.js 新分支

    io.js(JavaScript I/O)是兼容 NPM 平台的 Node.js 新分支,由 Node.js 的核心开发者在 Node.js 的基础上,引入更多的 ES6 特性,它的目的是提供更快的和 ...

  5. 快速搭建 Node.js 开发环境以及加速 npm

    如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...

  6. Node.js 学习(三) NPM 使用介绍

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...

  7. 编程语言 Node.js中使用到的npm工具

    啥是npm? npm就是(node package manager)包结点管理器,它随同Node.js一起安装的,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了. 同样可以通过输 ...

  8. vue(1)——node.js安装使用,利用npm安装vue

    node node简介 node.js也是用js开发的语言,而且是一门服务端语言,更有大神利用node写了一个操作系统出来——NodeOS node能干什么 自带下载工具: 对于我们开发前端项目,no ...

  9. Node.js相关——package概念及NPM

    1. package 包 CommonJS的包规范允许我们将一组相关的模块组合到一起,形成一组完整的工具.CommonJS的包规范由 包结构 和 包描述文件 两个部分组成. 1.1 包结构 包实际上就 ...

随机推荐

  1. 使用Microsoft.Office.Interop.Excel时,64位问题

    前不久,碰到一个问题. 曾经用的好好的Microsoft.Office.Interop.Excel实现的导出Excel,迁移至64位server后,就出现: 检索 COM 类工厂中 CLSID 为 { ...

  2. TextView-属性大全(设置超链接颜色)

    今天想要修改一个textview下的超链接的颜色值,自己当时在网上搜了一下,结果看到的全是怎么给一个textview中的部分内容设置颜色.下划线等.当时就以为在textview属性里面可能不存在设定超 ...

  3. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

  4. MySQL主从复制之Mycat简单配置和高可用

    什么是Mycat 1.Mycat就是MySQL Server,而Mycat后面连接的MySQL Server,就好象是MySQL的存储引擎,如InnoDB,MyISAM等.因此,Mycat本身并不存储 ...

  5. COGS——C2098. Asm.Def的病毒

    http://www.cogs.pro/cogs/problem/problem.php?pid=2098 ★☆   输入文件:asm_virus.in   输出文件:asm_virus.out    ...

  6. amazeui学习笔记--css(常用组件14)--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  7. 【AtCoder Beginner Contest 074 C】Sugar Water

    [链接]h在这里写链接 [题意] 让你在杯子里加糖或加水. (4种操作类型) 糖或水之间有一定关系. 糖和水的总量也有限制. 问你糖水浓度的最大时,糖和糖水的量. [题解] 写个dfs就好. 每次有4 ...

  8. GridView与ArrayAdapter的结合

    activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...

  9. 3、在编译过程中出现no space left on device

    原因:通过df -h查看发现磁盘空间不错  删掉不需要的文件后执行sudo apt-get clean

  10. Redis Cluster(Redis 3.X)设计要点

    Redis 3.0.0 RC1版本号10.9号公布,Release Note这个版本号支持Redis Cluster.相信非常多同学期待已久,只是这个版本号仅仅是RC版本号,要应用到生产环境,还得等等 ...