[NPM] Create a node script to replace a complex npm script
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的更多相关文章
- [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. ...
- npm不能安装任何包,报错:npm WARN onload-script failed to require onload script npm-autoinit/autoinit及解决方法
想要利用Hexo搭建一个博客,但是安装时npm一直报错,不仅仅是Hexo包,连别的其他包也不行,会提示下面的一堆错误 npm WARN onload-script failed to require ...
- 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 ...
- io.js - 兼容 NPM 平台的 Node.js 新分支
io.js(JavaScript I/O)是兼容 NPM 平台的 Node.js 新分支,由 Node.js 的核心开发者在 Node.js 的基础上,引入更多的 ES6 特性,它的目的是提供更快的和 ...
- 快速搭建 Node.js 开发环境以及加速 npm
如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...
- Node.js 学习(三) NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...
- 编程语言 Node.js中使用到的npm工具
啥是npm? npm就是(node package manager)包结点管理器,它随同Node.js一起安装的,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了. 同样可以通过输 ...
- vue(1)——node.js安装使用,利用npm安装vue
node node简介 node.js也是用js开发的语言,而且是一门服务端语言,更有大神利用node写了一个操作系统出来——NodeOS node能干什么 自带下载工具: 对于我们开发前端项目,no ...
- Node.js相关——package概念及NPM
1. package 包 CommonJS的包规范允许我们将一组相关的模块组合到一起,形成一组完整的工具.CommonJS的包规范由 包结构 和 包描述文件 两个部分组成. 1.1 包结构 包实际上就 ...
随机推荐
- 11.typeid
#include <iostream> using namespace std; void main() { int a; cout << typeid(a).name() & ...
- 关于VUE的一些指令的介绍
V-cloak 这是一个不常用的指令,出现这个指令的原因是因为有时候网络速度慢,还没加载完vue,代码就开始编译了,这个时候渲染出来的内容就可想而知了 <!DOCTYPE html> &l ...
- HTML中select的option设置selected="selected"无效的解决方式
今天遇到了一个奇葩问题,写HTML时有个select控件.通过设置option的selected="selected"竟然无效,可是在其它浏览器是能够的.问了一下Google大神, ...
- js中#代表什么
js中#代表什么 一.总结 1.#号:代表id选择器 2. $('#div1'). : 常用用法,前面也有$符号 二."#"在js中代表什么 js里我不曾看到用到‘#’的代码端, ...
- python获取序列中最大值
test =[ [1, 2, 3], [4, 5, 6], [7, 8, 9]] #这个就可以看做是二维数组了,直接创建print(test)print(test[:][1]) ...
- Codeforces Round #258 (Div. 2)——B. Sort the Array
B. Sort the Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- 详解javascript: void(0);
原文 简书原文:https://www.jianshu.com/p/08ae8cbeb3be 什么是javascript: void(0); 我们经常会使用到 javascript:void(0) 这 ...
- 恢复SLAVE上的某几张表的简要方法
同步报错是遇到最多的一个问题,如果你修复后发现还没有解决,通常的方法就是在Master上重新dump出一份,然后在slave上恢复.这个方法是针对整个库不是很大的情况下使用的,那如果是较大,全部dum ...
- jQuery实现多种切换效果的图片切换的五款插件
1:Nivo SliderNivoslider:丰富的图片切换效果 官方网址:https://themeisle.com/plugins/nivo-slider 查看演示:https://www.he ...
- Spring中@Async用法详解及简单实例
Spring中@Async用法 引言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类 ...