Automating tasks with npm-run


There are many good tools for building JavaScript automatically. But few people actually know.npm runCommands do this well and are easy to configure.

Automating tasks with npm-run

James Halliday shared his use on his blognpm runSome experience in automation tasks:


NPM will be in the projectpackage.jsonSearching in DocumentsscriptsRegions, includingnpm testandnpm startWait for orders.

actuallynpm testandnpm startyesnpm run testandnpm run startAbbreviation. In fact, you can usenpm runTo runscriptsAny entries in it.

Usenpm runThe convenience is that NPM will automaticallynode_modules/.binjoin$PATHIn this way, you can run the dependency program and develop the dependency program directly without installing it globally. As long as the packages on NPM provide command line interfaces, you can use them directly. Is that convenient? Of course, you can always write a simple little program by yourself.

Building JavaScript

In order to organize code and make use of packages on npm, it is often used when writing code.module.exportsandrequire()。 Browserify can package these together into a single script. It’s easy to use browserify, just inpackage.jsonAdd one['build-js']Items, like this:

"build-js": "browserify browser/main.js > static/bundle.js"

If it is used in production environment, it needs to be compressed. We just need touglify-jsAdd devDependency and then pass it directly through the pipeline.

"build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js"

Monitoring JavaScript

In order to automatically regenerate the JavaScript file after modifying the file, you just need to replace the browserify command above with watchify and add some parameters.

"watch-js": "watchify browser/main.js -o static/bundle.js -dv"

Here it is added.-dand-vTwo parameters, so you can see the detailed debugging information.

Building CSS

usecatIt can be done:

"build-css": "cat static/pages/*.css tabs/*/*.css > static/bundle.css"

Monitoring CSS

Similar to using watchify to monitor JavaScript above, we use Catw to monitor changes to CSS files:

"watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v"

Sequencing subtasks

It’s simple,npm runEach subtask is then used&&Connect.

"build": "npm run build-js && npm run build-css"

Parallel subtasks

Similarly, we use&Parallel subtasks:

"watch": "npm run watch-js & npm run watch-css"

Complete package. JSON example

Combine all the above.package.jsonThat’s roughly what it looks like:

  "name": "my-silly-app",
  "version": "1.2.3",
  "private": true,
  "dependencies": {
    "browserify": "~2.35.2",
    "uglifyjs": "~2.3.6"
  "devDependencies": {
    "watchify": "~0.1.0",
    "catw": "~0.0.1",
    "tap": "~0.4.4"
  "scripts": {
    "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js",
    "build-css": "cat static/pages/*.css tabs/*/*.css",
    "build": "npm run build-js && npm run build-css",
    "watch-js": "watchify browser/main.js -o static/bundle.js -dv",
    "watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v",
    "watch": "npm run watch-js & npm run watch-css",
    "start": "node server.js",
    "test": "tap test/*.js"

In production environment, only need to runnpm run build。 If it’s locally developed, usenpm run watch

You can also sit down and expand. For example, if you want to runstartRun beforebuildThen you just need to write this line:

"start": "npm run build && node server.js"

Maybe you want to start the watcher at the same time?

"start-dev": "npm run watch & npm start"

When things get very complicated

If you find it in a singlescriptsThere’s a bunch of commands stuffed in the entry, so you can think about refactoring and putting some commands somewhere else, like/bin

You can write this script in any language, such asbashnodeorperl。 Just add the appropriate ones to the script.#!That’s ok. And don’t forgetchmod +x

(cd site/main; browserify browser/main.js | uglifyjs -mc > static/bundle.js)
(cd site/xyz; browserify browser.js > static/bundle.js)
"build-js": "bin/"


You may be surprised that quite a few BASH-like grammars work on Windows. But at least we need to let it go.;and&It can work normally.

James Halliday shared some Windows-compatible experiences, which are also applicable to the topic of this article for reference. In addition, we recommend win-bash, which is a very convenient bash implementation on Windows platform.


James Halliday wants this to worknpm runThe method can attract a person who is not satisfied with the existing front-end automation task tools. James Halliday prefers tools with steep learning curves under the UNIX system, such asgitOr a tool like NPM that provides a minimal interface based on bash. That is to say, there is no need for a lot of ritualized operation and cooperation tools. Very simple tools, enough for the usual task.

If you are rightnpm runStyle does not catch cold. You may want to think about it.MakefilesA stable and simple, but somewhat weird alternative.

Original task automation with NPM run
Compile SegmentFault