In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. This ends up simplifying your package.json file and abstracts the complexity into another file.

From:

    "pretest": "npm run lint",
"test": "BABEL_ENV=test mocha spec/ --require babel-register",

To:

1. Create "scripts" folder and "test.sh" file:

#!/usr/bin/env bash

npm run lint
BABEL_ENV=test mocha spec/ --require babel-register

Then update package.json

"test": "./scripts/test.sh",

and remove "pretest" script.

2. Add premisson to the bash files:

cd scripts
chmod -R . // change premission for all files in script folder

3. Can add some messages:

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:

"build": "./scripts/build.sh",
#!/usr/bin/env bash

echo "Building..."
rm -rf public/$npm_package_version
pug --obj data.json src/index.pug --out public/$npm_package_version/
node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css
mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js
echo "Finished building."

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

  1. [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 ...

  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. npm缺少css-loader,/style-compiler,stylus-loader问题,npm没有权限无法全局更新问题【已解决】

    ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":tru ...

  5. <script src="../build/browser.min.js"></script> 是用来里面babel工具把ES6的语法转成ES5

    <!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...

  6. [NPM] Create a new project using the npm init <initializer> command

    Historically, the npm init command was solely use to create a new package.json file. However, as of ...

  7. How do I create an IIS application and application pool using InnoSetup script

    Create an IIS application. Create a new IIS application pool and set it's .NET version to 4. Set the ...

  8. vue-cli3.x npm create projectName 报错: Unexpected end of JSON input while parsing near......

    npm 版本与node版本还有webpack版本之间的问题 清理缓存,“ npm cache clean --force " 一切OK

  9. npm ERR! Failed at the node-sass@4.13.0 postinstall script

    node-sass 的数据源没设置 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass 重新 npm in ...

随机推荐

  1. 【MongoDB】在windows平台下mongodb的分片集群(六)

    在本篇博客中我们主要讨论下博客的管理.因为已经在前面五篇中写了具体的实例,因此这里就不再举例说明. 一.监控 分片集群是整个体系中比較复杂的一块,因此更应该须要监控. 主要命令: serverstat ...

  2. [1,2,3].forEach(alert);这样的写法有什么利和弊吗?

    以下这个问题遇到了之后.问了太阳神,以下是太阳神的解答: [1,2,3].forEach(alert);这样的写法有什么利和弊吗? 首先forEach使用方法非常easy降低代码量, 可是也有非常多地 ...

  3. Android 为什么要有handler机制?handler机制的原理

    为什么要有handler机制? 在Android的UI开发中,我们经常会使用Handler来控制主UI程序的界面变化.有关Handler的作用,我们总结为:与其他线程协同工作,接收其他线程的消息并通过 ...

  4. 微软云 azure 数据迁移之oracle11g dataguard

    背景,将本地的oracle数据迁移到微软云azure云上面的oracleserver. 1.复制本地的rman备份集到微软云azure的oracleserver上 scp -r -P56922 201 ...

  5. 【万里征程——Windows App开发】DatePickerFlyout、TimePickerFlyout的使用

    已经有挺长时间没有更新这个专栏了,只是刚才有网友私信问我一个问题如今就火速更新上一篇~ 这一篇解说在WP上DataPickerFlyout和TimePickerFlyout的使用.但它们仅仅能在WP上 ...

  6. Android Material风格的应用(一)--AppBar TabLayout

    打造Material风格的Android应用 Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--RecyclerV ...

  7. windows下安装wabt

    windows下安装wabt 安装前准备cmake.mingw环境 安装cmake 安装mingw 步骤 # 1.克隆wabt源码 git clone https://github.com/WebAs ...

  8. XAMPP简介

    XAMPP是一款开源.免费的网络服务器软件,经过简单安装后,就可以在个人电脑上搭建服务器环境.本文为大家介绍Windows中安装XAMPP(Apache+Mysql+PHP)及使用方法及其相关问题的总 ...

  9. spring与memcache的整合

    1. pom.xml文件增加: <dependency> <groupId>com.whalin</groupId> <artifactId>Memca ...

  10. Maven报错Missing artifact jdk.tools:jdk.tools:jar:1.7--转

    原文地址:http://blog.csdn.net/u013281331/article/details/40824707 在Eclipse中检出Maven工程,一直报这个错:“Missing art ...