fix: add nps-utils to docs and package-scripts.js (#122)

Author: Kent C. Dodds

README.md

@@ -23,7 +23,7 @@ All the benefits of npm scripts without the cost of a bloated package.json and l
 ## Quick Video Intro :tv:
 
 <a href="http://kcd.im/nps-video" title="Pull out npm scripts into another file with nps">
-  <img src="other/video-screenshot.png" alt="Video Screenshot" title="Video Screenshot" width="700" />
+  <img src="https://github.com/kentcdodds/nps/raw/master/other/video-screenshot.png" alt="Video Screenshot" title="Video Screenshot" width="700" />
 </a>
 
 [Pull out npm scripts into another file with nps][video] by [Elijah Manor](https://github.com/elijahmanor) (5:53)
@@ -41,6 +41,8 @@ this file is a JavaScript file, you can do a lot more with your project scripts.
 `package-scripts.js` file:
 
 ```javascript
+const npsUtils = require('nps-utils') // not required, but handy!
+
 module.exports = {
   scripts: {
     default: 'node index.js',
@@ -58,9 +60,8 @@ module.exports = {
       default: 'webpack',
       prod: 'webpack -p',
     },
-    // learn more about concurrently here: https://npm.im/concurrently
-    validate: 'concurrently "nps lint" "nps test" "nps build"',
-    // concurrently script too verbose for your liking? Check out other/EXAMPLES.md!
+    // learn more about npsUtils here: https://npm.im/nps-utils
+    validate: npsUtils.concurrently.nps('lint', 'test', 'build'),
   },
 }
 ```
@@ -407,6 +408,11 @@ This was inspired by [a tweet][tweet] by [@sindresorhus][sindre].
 Big thank you to [@tmpvar][tmpvar] for giving up the name `nps`! The original `nps` is now
 called [`npmsearch-cli`](https://www.npmjs.com/package/npmsearch-cli).
 
+## Related Packages
+
+- [`nps-utils`][nps-utils] - a collection of utilities to make cross-platform scripts and many other patterns
+(like running concurrent/parallel scripts)
+
 ## Other Solutions
 
 - [scripty][scripty] has a solution for this problem as well. The reason I didn't go with that though is you still need
@@ -479,3 +485,4 @@ MIT
 [npm scripts]: https://docs.npmjs.com/misc/scripts
 [video]: http://kcd.im/nps-video
 [releases]: https://github.com/kentcdodds/nps/releases/tag/v5.0.0
+[nps-utils]: https://github.com/kentcdodds/nps-utils

other/EXAMPLES.md

@@ -1,5 +1,11 @@
 # package-scripts examples
 
+## nps-utils
+
+Many common patterns in `nps` can be accomplished with the
+[`nps-utils`](https://github.com/kentcdodds/nps-utils) package. Definitely
+recommended to check it out!
+
 ## Links to projects
 
 Examples of how people use `nps`:
@@ -53,26 +59,31 @@ get the idea 😄. This is a pretty nice win over traditional npm scripts 👍
 ### parallel scripts
 
 Often, scripts can run concurrently because they are not interdependent. We recommend
-[`concurrently`](http://npm.im/concurrently) for this:
+[`nps-utils`](http://npm.im/nps-utils) which uses `concurrently` for this:
 
 ```javascript
+const npsUtils = require('nps-utils')
+
 module.exports = {
   scripts: {
-    validate: concurrent([
+    sayThings: npsUtils.concurrent({
+      hi: {script: 'echo hi'},
+      hey: {script: 'echo hey', color: 'blue.bgGreen.dim'},
+      hello: 'echo hello there',
+    }),
+    validate: npsUtils.concurrent.nps(
       'build',
       'lint',
       'test',
       'order.sandwich',
-    ]),
+    ),
+    build: 'webpack',
+    lint: 'eslint .',
+    test: 'jest',
+    order: {sandwich: 'makemeasandwich'}
     // etc...
   }
 }
-
-function concurrent(scripts) {
-  const names = scripts.join(',')
-  const quotedScripts = `"nps ${scripts.join('" "nps ')}"`
-  return `concurrently --prefix "[{name}]" --names "${names}" ${quotedScripts}`
-}
 ```
 
 ## Instructions

package-scripts.js

@@ -1,5 +1,7 @@
+const {series, concurrent, rimraf} = require('nps-utils')
+
 const transpile = 'babel --copy-files --out-dir dist --ignore *.test.js,fixtures src'
-const cleanDist = 'rimraf dist'
+const cleanDist = rimraf('dist')
 
 module.exports = {
   scripts: {
@@ -18,14 +20,14 @@ module.exports = {
     build: {
       default: {
         description: 'deletes the `dist` directory and transpiles all relevant `src` to the `dist`',
-        script: [cleanDist, transpile].join('&&'),
+        script: series(cleanDist, transpile),
       },
       watch: {
-        script: [cleanDist, `${transpile} --watch`].join('&&'),
+        script: series(cleanDist, `${transpile} --watch`),
       },
       andValidate: {
         description: 'Runs the normal build first, then validates the CLI',
-        script: 'nps build && nps test.cli',
+        script: series.nps('build', 'test.cli'),
       },
     },
     lint: {
@@ -38,26 +40,16 @@ module.exports = {
     },
     release: {
       description: 'We automate releases with semantic-release. This should only be run on travis',
-      script: 'semantic-release pre && npm publish && semantic-release post',
+      script: series(
+        'semantic-release pre',
+        'npm publish',
+        'semantic-release post'
+      ),
     },
     validate: {
       description: 'This runs several scripts to make sure things look good before committing or on clean install',
-      script: concurrent({
-        'build-and-validate': {
-          script: 'nps build.andValidate',
-          color: 'bgBlue.bold',
-        },
-        test: {
-          script: 'nps test',
-          color: 'bgMagenta.bold',
-        },
-        'lint-staged': {
-          script: 'nps lintStaged',
-          color: 'bgGreen.bold',
-        },
-      }),
+      script: concurrent.nps('test', 'build.andValidate'),
     },
-    lintStaged: 'lint-staged',
     format: {
       description: 'auto-formats the code',
       script: 'prettier-eslint --write "src/**/*.js"',
@@ -76,35 +68,6 @@ module.exports = {
   },
 }
 
-function concurrent(scripts) {
-  const {
-    colors,
-    scripts: quotedScripts,
-    names,
-  } = Object.keys(scripts).reduce(reduceScripts, {
-    colors: [],
-    scripts: [],
-    names: [],
-  })
-  const flags = [
-    //   https://github.com/kimmobrunfeldt/concurrently/issues/91
-    //   '--kill-others',
-    `--prefix-colors "${colors.join(',')}"`,
-    '--prefix "[{name}]"',
-    `--names "${names.join(',')}"`,
-    quotedScripts.join(' '),
-  ]
-  return `concurrently ${flags.join(' ')}`
-
-  function reduceScripts(accumulator, scriptName) {
-    const {script, color} = scripts[scriptName]
-    accumulator.names.push(scriptName)
-    accumulator.colors.push(color)
-    accumulator.scripts.push(`"${script}"`)
-    return accumulator
-  }
-}
-
 // this is not transpiled
 /*
   eslint

package.json

@@ -8,7 +8,7 @@
     "test": "nps test",
     "localstart": "npm start build && node ./dist/bin/nps.js",
     "commitmsg": "opt --in commit-msg --exec \"validate-commit-msg\"",
-    "precommit": "opt --in pre-commit --exec \"npm start validate\""
+    "precommit": "opt --in pre-commit --exec \"lint-staged && npm start validate\""
   },
   "bin": {
     "nps": "./dist/bin/nps.js"
@@ -42,10 +42,8 @@
     "babel-preset-env": "^1.1.8",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.23.0",
-    "cli-tester": "^2.0.0",
     "codecov": "^1.0.1",
     "commitizen": "^2.9.6",
-    "concurrently": "^3.3.0",
     "cross-env": "^3.1.4",
     "cz-conventional-changelog": "^1.2.0",
     "eslint": "^3.15.0",
@@ -54,9 +52,9 @@
     "jest-cli": "^18.1.0",
     "lint-staged": "^3.3.0",
     "nps": "*",
+    "nps-utils": "^1.1.0",
     "opt-cli": "^1.5.1",
     "prettier-eslint-cli": "^3.0.0",
-    "rimraf": "^2.6.0",
     "semantic-release": "^6.3.6",
     "sinon": "^1.17.7",
     "validate-commit-msg": "^2.11.1"