[NPM] Make npm scripts cross-environment friendly

Unfortunately not all shell commands work across various environments. Two main techniques to support cross-environment scripts is to either use cross-platform commands or to use normalized node packages. In this lesson, we will look at updating an existing set of npm scripts and make sure they work on Mac OS X, Linux, and Windows.

 

1. Use cross-env

npm i -D cross-env

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

---

 

2. Use 'rimraf' instead of 'rm -rf'

npm i -D rimraf 

"postcover": "rimraf .nyc_output",

---

 

3. Use 'opn-cli' instead of 'open'

npm i -D opn-cli

"cover:open": "opn coverage/index.html",

---

 

4. Windows need double qoutes, to make it works for all envs, we can use \"

"lint:css": "stylelint \"**/*.scss\" --syntax scss",

---

 

5. Windows : '%npm_package_version%',

    Mac and Linux: '$npm_package_version'

npm i -D cross-var

"prebuild": "cross-var rimraf public/$npm_package_version",

 

Should be careful when we use '|' pipe and '>' output symbol, we should wrap the whole command in a \"\":

"build:css": "cross-var \"node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css\"",

 

---

 

  "scripts": {
    "start": "node index.js",
    "poststart": "npm run build && npm run server",
    "pretest": "npm run lint",
    "test": "cross-env BABEL_ENV=test mocha spec/ --require babel-register",
    "cover": "nyc npm t",
    "postcover": "rimraf .nyc_output",
    "cover:open": "opn coverage/index.html",
    "lint": "npm-run-all lint:**",
    "lint:js": "eslint --cache --fix ./",
    "lint:css": "stylelint \"**/*.scss\" --syntax scss",
    "lint:css:fix": "stylefmt -R src/",
    "watch": "npm-run-all --parallel watch:*",
    "watch:test": "npm t -- --watch",
    "watch:lint": "onchange \"src/**/*.js\" \"src/**/*.scss\" -- npm run lint",
    "build": "npm-run-all build:*",
    "prebuild": "cross-var rimraf public/$npm_package_version",
    "xbuild:html:mac": "pug --obj data.json src/index.pug --out public/$npm_package_version/",
    "xbuild:html:win": "pug --obj data.json src/index.pug --out public/%npm_package_version%/",
    "build:html": "cross-var pug --obj data.json src/index.pug --out public/$npm_package_version/",
    "xbuild:css:mac": "node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css",
    "xbuild:css:win": "node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/%npm_package_version%/index.min.css",
    "build:css": "cross-var \"node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css\"",
    "xbuild:js:mac": "mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js",
    "xbuild:js:win": "mustache data.json src/index.mustache.js | uglifyjs > public/%npm_package_version%/index.min.js",
    "build:js": "cross-var \"mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js\"",
    "server": "npm-run-all --parallel server:*",
    "server:create": "cross-var http-server public/$npm_package_version -p $npm_package_config_port",
    "server:launch": "cross-var opn http://localhost:$npm_package_config_port",
    "prepush": "npm run lint"
  },