Skip to content

NPM Scripts with & and && operators

Last updated on April 19, 2020

After we got introduced Node.js (which helps to build Server-side JavaScript application), npm popularity is increased tremendously.

Introduction

Understanding the usages of npm would make your life little better. Before npmwe were using Gruntand Gulptask runners.

As you all know that, we don’t simply serve our JavaScript application files instead, we do minify, bundling the JavaScript files.

Then our application bundle size will become small enough to speed up our website by employing different bundling techniques and tools.

NPM ‘&’ and ‘&&’ Operators

By knowing this two operators you can run your task in an efficient manner with less time consuming.

For instance, we have two tasks,

  • Transpilling, Minifying CSS, then Bundling CSS
  • Minifying JS, then Bundling JS

I use, node-sasstool to transpile our SCSS files to CSS files then minifying those.

To accomplish the above two tasks, we could achieve by writing npmscripts from package.jsonfile.

{
  "scripts: {
    "build-css": "node-sass -w public/css/scss/style.scss public/css/style.css --output-style compressed",
    "build-js" : "uglifyjs src/index.js -o index.min.js -c"
  }
}

The above two npmscripts can be clubbed in a single npmscript with &&operator.

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

&&operator is to run npm scripts sequentially.

The above buildscript can be re-written as,

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

&operator is to run npm scripts concurrently.

Published inAngularFrameworksJavaScriptReact