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. [Vue + TS] Using Route events inside Vue

    vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...

  2. Vue 自定义全局消息框组件

    消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...

  3. session 、cookie、token的区别及联系

    本文转自:https://blog.csdn.net/jikeehuang/article/details/51488020:https://blog.csdn.net/weixin_37196194 ...

  4. C# 映射

    public class Myclass1 { private int m_Count = 100; public string love{get;set;} public int Count { g ...

  5. Python中的文本(一)

    本文主要记录和总结本人在阅读<Python标准库>一书,文本这一章节的学习和理解. 事实上在Python中,使用文本这种一些方法是特别经常使用的一件事.在一般的情况下,都会使用String ...

  6. WCF REST (二)

    今天主要写下  POST等其他方式 发送请求 以及 流方式 文件的上传与下载 一.Post 提交数据 先来想下 POST和Get 的不同   Get 方式 我们直接通过 url  来传递参数   先来 ...

  7. 怎么做好看的html5游戏界面

    怎么做好看的html5游戏界面 一.总结 一句话总结:html5应该是完全可以做特别好看的游戏界面的.最下面那个背景图完全是一张图片动的雪和小动物可以是gif,或者是canvas,右边的那各个选择框就 ...

  8. less相关知识点

    less是一门css预处理语言,文件后缀名为.less,能减少css文件编写的代码量 官网 http://lesscss.cn/#using-less 安装 使用npm install -g less ...

  9. 每日技术总结:setx,

    1.setx命令设置环境变量 设置用户环境变量: setx NAME "XXX" 设置系统环境变量: setx NAME "XXX" /m

  10. python中线程、进程和协程的区别

    进程是资源分配的单位 线程是操作系统调度的单位 协程,又称微线程,纤程,协程的切换只是单纯的操作CPU的上下文,资源很小,效率高 进程切换需要的资源很最大,效率很低 一个程序至少有一个进程,一个进程至 ...