npm Scripts

- How to get rid of boredom and boilerplate

Nordnet Academy

Agenda

  • What is npm scripts? 
  • Why should I use npm scripts?
  • How can I use npm scripts? (Basics)
  • How can I impress with npm scripts? (Advanced)
  • How to not break stuff!
  • Q&A

What is npm scripts?

  • Executor of commands 
  • Uses package.json
  • A life changer

(Sort of like MVN)

Why should I use npm scripts?

  • Automation
  • Convinience
  • Simplicity

...But I already use Grunt/Gulp for that!

npm scripts:

  • Reduces dependencies
  • Reduces boilerplate code

Why should I use npm scripts?

How can I use npm scripts?

First!

package.json 

{
   "name": "npm-scripts-demo",

   "scripts": {
     "first": "echo Hello"
   }
}

console 

$ npm run first
Hello
$

Real example

package.json 

{
  "name": "npm-scripts-demo",

  "scripts": {
    "jshint": "jshint scripts/"
  },

  "devDependencies": {
    "jshint": "2.8.0"
  }
}

console

How can I use npm scripts? 

$ npm run jshint
scripts/index.js: line 3, col 29,
Missing semicolon.

1 error

npm ERR! Darwin 15.2.0
...
$

More of the Real stuff

package.json 

{
  "scripts": {
    "jshint": "jshint scripts/",
    "minify": "minify scripts/",
    "build": "npm run jshint && npm run minify"
  },
  "devDependencies": {
    "jshint": "2.8.0",
    "minifier": "0.7.1"
  }
}

console

How can I use npm scripts? 

$ npm run build
> npm run jshint && npm run minify
> jshint scripts/
> minify scripts/index.js
Minification complete
$

How can I Impress with npm scripts?

Pre-/Post-hooks

How can I impress with npm scripts?

package.json 

{
  "scripts": {
    "clean": "rm -f scripts/index.min.js",
    "prebuild": "npm run clean",
    "build": "npm run jshint && npm run minify"
  },
  "devDependencies": {
    "jshint": "2.8.0",
    "minifier": "0.7.1"
  }
}

console 

$ npm run build
> npm run clean
> npm run jshint && npm run minify
> jshint scripts/
> minify scripts/index.js
Minification complete
$

Configuration variables

How can I impress with npm scripts?

package.json 

{
  "config": {
    "sources": "scripts/"
  },
  "scripts": {
    "clean": "rm -f $npm_package_config_sources/index.min.js",
    "minify": "minify $npm_package_config_sources",

    "print:sources": "echo $npm_package_config_sources"
  },
}

console 

$ npm run print:sources

> echo $npm_package_config_sources

scripts/
$

npm-run-all

How can I impress with npm scripts?

package.json 

{
  "scripts": {
    "minify:js": "minify js/",
    "minify:html": "minify html/",

    "build:sequential": "npm-run-all jshint minify:*",
    "build:parallel": "npm-run-all --parallel jshint minify:js"
  },
  "devDependencies": {
    "npm-run-all":"1.4.0"
  }
}

console 

$ npm run build:sequential
> npm-run-all jshint minify:*

> jshint $npm_package_config_sources
> minify js/
> minify html/
$

How to !break stuff

Pin versions

How to !break stuff

{
  "dependencies":{
    "dep": "*",
    "dep1": "1.x",
    "dep2": "1.2.*",
    "dep3": "^1.2.3",
    "dep4": "~1.2.3",
  }
}

Faulty Package.json 

{
  "dependencies":{
    "correct-dep": "1.2.3",
  }
}

Correct Package.json 

/* isaacs/node-semver */
     *  :=  >=0.0.0         (Any version satisfies)
   1.x  :=  >=1.0.0 <2.0.0  (Matching major version)
 1.2.x  :=  >=1.2.0 <1.3.0  (Matching major and minor versions)
~1.2.3  :=  >=1.2.3 <1.3.0  (Reasonably close to 1.2.3)
^1.2.3  :=  >=1.2.3 <2.0.0  (Compatible with 1.2.3)

Unglobal yourself

How to !break stuff

# Installation

npm install --global dependency

# Build

$ dependency execute --flag

Faulty Readme.md

node_modules/.bin/

autoinjected to

$PATH

{
  "scripts": {
    "dep": "dep execute --flag"
  },
  "devDependency":{
    "dep": "1.2.3"
  }
}

Correct package.json 

$ npm run dep
Executing with flag...
Execution done.
$

Correct execution 

$ node_modules/.bin/dep execute --flag
Executing with flag...
Execution done.
$

Crossplatform!

How to !break stuff

{
  "scripts":{
    "clean": "rm -rf dir/",
    "clean:win": "del /f /q /s dir/",

    "create": "mkdir -p dir/subdir",
    "create:win": "md dir/subdir"
  }
}

Faulty package.json 

{
  "scripts":{
    "clean": "rimraf dir/",

    "create": "mkdirp dir/subdir",
  },
  "devDependencies": {
    "mkdirp": "0.5.1",
    "rimraf": "2.5.0"
  }
}

Correct package.json

Make sure targets run crossplatform

Q & A

npm Scripts

By nordnetacademy

Made with Slides.com

npm Scripts

  • 768

More from nordnetacademy