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
[NPM] Pull out npm scripts into another file with p-s
原文：http://www.cnblogs.com/Answer1215/p/6390392.html