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. 【Java】Java Socket 通信演示样例

    用socket(套接字)实现client与服务端的通信. 这里举两个样例: 第一种是每次client发送一个数据,服务端就做一个应答. (也就是要轮流发) 另外一种是client能够连续的向服务端发数 ...

  2. React评论展示案例(包含知识点:state、props、ref、React声明周期、localStorage本地存储等)

    本案例在上一篇的案例(React组件之间通过Props传值的技巧(小案例,帮助体会理解props.state.受控组件和非受控组件等))的基础上加强功能和用户体验,但是当然还有很多需要改进的地方,后期 ...

  3. 水题ing

    T1: https://www.luogu.org/problemnew/show/P1724幻想乡,东风谷早苗是以高达控闻名的高中生宅巫女.某一天,早苗终于入手了最新款的钢达姆模型.作为最新的钢达姆 ...

  4. Java Web学习总结(17)——JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  5. windows下配置mycat与常见问题解决

    mycat官网:http://www.mycat.org.cn/ wiki:https://github.com/MyCATApache/Mycat-Server/wiki MyCat使用Mysql的 ...

  6. iOS ERROR: unable to get the receiver data from the DB 解决方式

    这个错误通常发生在iOS7其中,可能是缓存的导致的问题. 解决步骤: 右击Finder,选择 Go to Folder 复制上:"~/Library/Application Support/ ...

  7. Android Material风格的应用(二)--RecyclerView

    添加RecyclerView Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--RecyclerViewAndro ...

  8. 几个移动web app开发框架

    几个移动web app开发框架 一.总结 1.有amaze ui,有app.js(登录注册界面用到的)  二.几个移动web app开发框架 jQuery Mobile jQuery Mobile框架 ...

  9. 关于JS面向对象继承问题

    1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...

  10. POJ 2376 Cleaning Shifts 区间覆盖问题

    http://poj.org/problem?id=2376 题目大意: 给你一些区间的起点和终点,让你用最小的区间覆盖一个大的区间. 思路: 贪心,按区间的起点找满足条件的并且终点尽量大的. 一开始 ...