How to Use npm Scripts as Your Build Tool

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

Watch User Created Playlist (21)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Create a basic package.json file

P

Run the basic npm scripts

P

Create a custom npm script

P

Run npm scripts in series

P

Run npm scripts in parallel

P

Use a shorthand syntax for running multiple npm scripts with npm-run-all

P

Run a set of similar npm scripts with a wildcard

P

Use pre and post npm script lifecycle hooks

P

Pass arguments to npm scripts

P

Pipe data from one npm script to another

P

Run npm scripts when files change with onchange

P

Use package.json variables in npm scripts

P

Use custom config settings in your npm scripts

P

Run npm scripts with git hooks

P

Change the level of console output when running npm scripts

P

Make npm scripts cross-environment friendly

P

List available npm scripts and support tab completion

P

Add comments to your npm scripts

P

Pull out npm scripts into another file with p-s

P

Create a bash script to replace a complex npm script

P

Create a node script to replace a complex npm script

P
npm tutorial about Create a basic package.json file

Create a basic package.json file

1:56 npm PRO

We will walk through how to create a simple package.json file manually as well as create a default package.json file through npm with npm init -f. Then we will look at where the npm scripts live and how to run the default script that was created.

npm tutorial about Run the basic npm scripts

Run the basic npm scripts

0:56 npm PRO

In this lesson we will examine two common scripts (start and test) that npm natively understands. We’ll define these scripts for our existing repository and show how you can run the scripts from the terminal.

npm tutorial about Create a custom npm script

Create a custom npm script

1:17 npm PRO

A lot of the power behind npm scripts is creating custom scripts that are outside the basic set that npm natively understands. In this lesson we will install the ESLint node package, create a new eslint npm script, briefly discuss about environment variables and how npm knows where to find your binary, and then execute our custom script from the command line.

npm tutorial about Run npm scripts in series

Run npm scripts in series

0:59 npm PRO

After creating several npm script it becomes useful to run multiple scripts back-to-back in series. This is a nice feature because you can enforce that one script needs to complete before starting another one.

npm tutorial about Run npm scripts in parallel

Run npm scripts in parallel

2:05 npm PRO

In this lesson we will look at running several npm scripts in parallel. Sometimes you don’t need scripts to be run in series and switching them to run in parallel can increase performance since they are not blocking each other. At the end you need to add a wait command so they can be terminated with ^C

npm tutorial about Use a shorthand syntax for running multiple npm scripts with npm-run-all

Use a shorthand syntax for running multiple npm scripts with npm-run-all

1:38 npm PRO

Running multiple scripts in series or in parallel can become very verbose. Using a tool such as npm-run-all can help reduce the amount of overhead you have to type in order to get the same behavior.

npm tutorial about Run a set of similar npm scripts with a wildcard

Run a set of similar npm scripts with a wildcard

1:58 npm PRO

In this lesson we will run a set of scripts that are grouped together with a wildcard using the npm-run-all node package. Using this technique can help you simplify and organize your scripts.

npm tutorial about Use pre and post npm script lifecycle hooks

Use pre and post npm script lifecycle hooks

1:23 npm PRO

For each npm script there is a pre and post version of the script that will be called if defined. This can be helpful when you want to enforce a validation check before running a script or inject a specific behavior when a script is executed.

npm tutorial about Pass arguments to npm scripts

Pass arguments to npm scripts

1:03 npm PRO

Often times you’ll have variations that you’ll want to make to your npm scripts and repeating yourself is inefficient and verbose. Instead you can create a base script and pass arguments into it from another script.

npm tutorial about Pipe data from one npm script to another

Pipe data from one npm script to another

4:31 npm PRO

In an effort to bypass saving temporary build files you can leverage piping and output redirection to streamline your build process. In addition using these technique can speed up your build process.

npm tutorial about Run npm scripts when files change with onchange

Run npm scripts when files change with onchange

2:06 npm PRO

In this lesson we will look at how we can setup our npm scripts to execute when the file system has changed. Some common examples of this are automatically linting your code, running unit tests, or using a pre-processor for your CSS.

npm tutorial about Use package.json variables in npm scripts

Use package.json variables in npm scripts

1:22 npm PRO

In this lesson we will show that you can leverage values that you already have provided in your package.json file such as the name and version keys. You may want to use these in your npm scripts as you create folders and file names.

npm tutorial about Use custom config settings in your npm scripts

Use custom config settings in your npm scripts

3:00 npm PRO

In addition to package.json level variables (such as name and version), you can have custom conf settings that can be used in your npm scripts. These config values can be overridden outside of the package.json by using the npm config set command if necessary.

npm tutorial about Run npm scripts with git hooks

Run npm scripts with git hooks

1:56 npm PRO

In this lesson we will look about how we can integrate with git hooks to help enforce a certain level of quality before you either commit your code or push to a remote repository.

npm tutorial about Change the level of console output when running npm scripts

Change the level of console output when running npm scripts

0:48 npm PRO

There are times when it is helpful for a npm script to have lots of logs when trying to debug a problem, but there are other times when you want to run a script silently. Thankfully there are a range of flags to control the log level used when running npm scripts.

npm tutorial about Make npm scripts cross-environment friendly

Make npm scripts cross-environment friendly

5:41 npm PRO

Unfortunately not all shell commands work across various environments. Two main techniques to support cross-environment scripts is to either use cross-platform commands or to use normalized node packages. In this lesson, we will look at updating an existing set of npm scripts and make sure they work on Mac OS X, Linux, and Windows.

npm tutorial about List available npm scripts and support tab completion

List available npm scripts and support tab completion

1:52 npm PRO

In this lesson we will look at different ways you can list the available npm scripts. Whether we want to pipe npm run through less or install an npm package such as completion or ntl, we have many options to quickly execute scripts with shell tab completion.

npm tutorial about Add comments to your npm scripts

Add comments to your npm scripts

2:10 npm PRO

The need for comments in your package.json file becomes desirable the more and more npm scripts you start to define. At first glance this might seem like a show stopper since JSON does not support comments, but there are ways around this limitation that we will discuss.

npm tutorial about Pull out npm scripts into another file with p-s

Pull out npm scripts into another file with p-s

5:52 npm PRO

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.

react tutorial about Create a bash script to replace a complex npm script

Create a bash script to replace a complex npm script

2:55 react PRO

In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. This ends up simplifying your package.json file and abstracts the complexity into another file.

npm tutorial about Create a node script to replace a complex npm script

Create a node script to replace a complex npm script

7:04 npm PRO

In this lesson we will look at pulling out complex npm script logic into an external JavaScript file. Instead of writing bash scripts you can leverage your JavaScript abilities to automate your build process. We’ll use some helper node modules such as shelljs, opn-cli, and babel-cli.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?