[NPM] Pull out npm scripts into another file with p-s

A technique you might use once you start having lots of npm scripts is to use a node package that allows you to define your scripts in an external package-scripts.js file. By pulling out your scripts it can help with organization, enable better comments, provide shortcuts, and more.

Install:

npm i -D p-s

Run:

node_modules/.bin/p-s init

Then if we check package.json file, we found that the scripts from:

  "scripts": {
    "start": "node index.js",
    "poststart": "npm run build && npm run server",
    "pretest": "npm run lint",
    "test": "BABEL_ENV=test mocha spec/ --require babel-register",
    "cover": "nyc npm t",
    "postcover": "rm -rf .nyc_output",
    "cover:open": "open 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": "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",
    "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",
    "prepush": "npm run lint"
  },

to:

  "scripts": {
    "start": "nps",
    "test": "nps test"
  },

We still can run 'npm start' & 'npm t', the actual scripts points to package-script.js file:

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

Now there are some problems we need to fix before it can run all the scripts.

1. Add help command:

Now if we run

npm run

/*
  start
    nps
  test
    nps test
*/

We can only see two scripts.

But we can run:

npm start -- --help

Then we able to see all the scripts:

For a more convenient way, we can create a help script:

"help": "npm start -- --help"

or just:

"help": "nps --help"

2. We can add "description" to package-scripts.js to make each command more clear why to use.

So for example, I can "test" script in package-scripts.js from:

test: 'BABEL_ENV=test mocha spec/ --require babel-register',

to:

    test: {
        script: 'BABEL_ENV=test mocha spec/ --require babel-register',
        description: 'Run the mocha tests'
    },

Now if we run help command:

test - Run the mocha tests - BABEL_ENV=test mocha spec/ --require babel-register

We can see the description also.

3. There is no 'npm-run-all' package for 'p-s'

For example:

    lint: {
      default: 'npm-run-all lint:**',
      js: 'eslint --cache --fix ./',
      css: {
        default: 'stylelint \'**/*.scss\' --syntax scss',
        fix: 'stylefmt -R src/'
      }
    },

We can change to:

    lint: {
      default: 'nps lint.js,lint.css,lint.fix',
      js: 'eslint --cache --fix ./',
      css: {
        default: 'stylelint \'**/*.scss\' --syntax scss',
        fix: 'stylefmt -R src/'
      }
    },

Another example:

    watch: {
      default: 'npm-run-all --parallel watch:*',
      test: 'npm t -- --watch',
      lint: 'onchange \'src/**/*.js\' \'src/**/*.scss\' -- npm run lint'
    },

'nps' understand '--parallel' flag, so we can change this script to:

    watch: {
      default: 'nps watch.test,watch.lint --parallel',
      test: 'npm t -- --watch',
      lint: 'onchange \'src/**/*.js\' \'src/**/*.scss\' -- npm run lint'
    },

4. 'nps' doesn't support 'pre-' or 'post-' scripts.

For the post- scripts: using '&&' 

For example:

    default: 'node index.js',
    poststart: 'npm run build && npm run server',

We have poststart, we can change to:

default: 'node index.js && nps build,server',

For the pre- scripts:

For example:

    pretest: 'npm run lint',
    test: {
        script: 'BABEL_ENV=test mocha spec/ --require babel-register',
        description: 'Run the mocha tests'
    },

we can change to:

    test: {
        default: {
            script: 'nps lint,test.run',
            description: 'Run the mocha tests'
        },
        run: 'BABEL_ENV=test mocha spec/ --require babel-register',
    },

Example2:

change from:

    cover: {
      default: 'nyc npm t',
      open: 'open coverage/index.html'
    },
    postcover: 'rm -rf .nyc_output',

to:

    cover: {
      default: 'nyc npm t && nps cover.clean',
      open: 'open coverage/index.html',
      clean: 'rm -rf .nyc_output',
    },

Example3:

From:

    build: {
      default: 'nps build.html,build.css,build.js',
      html: 'pug --obj data.json src/index.pug --out public/$npm_package_version/',
      css: 'node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css',
      js: 'mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js'
    },
    prebuild: 'rm -rf public/$npm_package_version',

to:

    build: {
      default: 'nps build.clean,build.html,build.css,build.js',
      clean: 'rm -rf public/$npm_package_version',
      html: 'pug --obj data.json src/index.pug --out public/$npm_package_version/',
      css: 'node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/$npm_package_version/index.min.css',
      js: 'mustache data.json src/index.mustache.js | uglifyjs > public/$npm_package_version/index.min.js'
    },

Example4:

prepush: 'npm run lint'

Move to package.json file:

"prepush": "nps lint"

---

So now if you want to run any script, you can do:

npm start lint
npm start build.js

Aslo nps provides shortcut to run script:

npm start build.html

// the same as

npm start b.h

---

If you install 'p-s' grobally, you can run any command by:

nps lint
nps build