Learn how to leverage npm scripts to create commands that, in turn, execute more than one other npm script command, allowing you to simplify your builds.
In order to explain npm scripts, I have created a simple project that leverages Gulp. So, to run the code locally, clone the following git hub repository: Getting started with npm scripts.
Instructions on how to run the code are available in the Git hub page.
This project has four features:
- It compiles a SASS file to CSS.
- It starts a Node.js web server.
This is a very simple example and it’s mostly Gulp compiling and minifying files. I chose this project because it requires some manual steps. Now, it’s possible to automate these tasks using Gulp, but what if you needed to switch to tools such as Grunt, or Broccoli.js? In such a case, your commands would change. For example, “gulp coffee” would become “grunt coffee”. While this is not fatal, it be nice if we could have a consistent set of commands. So the question is, how can we build our local development assets and start the Node.js server with one command? Also, how can we ensure that this one command never changes? Well, this is where npm scripts come in!
Project Folder Structure – Example # 1
In Example # 1, we have the folder structure for our project. There is an src folder that contains three sub folders:
- The coffee folder has a coffeescript file.
- The sass folder has a SASS file.
These three files are used by our build. The built versions of these files are placed in the build/css and build/js folders accordingly.
package.json (no npm scripts) – Example # 2
- gulp sass: This command will compile the file src/sass/main.scss and create build/css/main.css
- gulp coffee: This command will compile the file src/coffee/global.coffee and create build/js/global.js
- gulp uglify: This command will uglify the file src/js/main.js and create build/js/main.js
- node index.js: This command will start the Node.js web server on port # 3000.
You can run each command and it will work just fine, but the problem is that each time you change any of the files, you will want to build them again, and then restart the web server.
Adding npm scripts to package.json – Example # 3
In Example # 3, we have added a scripts object to package.json. Here is a breakdown of the script commands:
- build:sass : This command is a shortcut to: gulp sass.
- build:coffee : This command is a shortcut to: gulp coffee.
build:js : This command is a shortcut to: gulp uglify.
build : This command will execute the previous three commands. It executes three steps in one command.
serve : This command is a shortcut to: node ./index.js (it starts the Node.js web server).
start : This command builds all three files, and then starts the web server
clean : This command will delete every the built file (these are files created by all previous commands).
What to expect when you run the example code locally
- npm start – The build places the three built files in the build/css and build/js folders accordingly. And then, it starts the Node.js web server. You will see messages in your terminal that indicating these outcomes.
npm run clean – npm deletes the three built files in the build/css and build/js folders. (This is helpful if you want to “start from scratch” when running the npm start command. This way you see the built files created each time.
This article is a basic introduction to, and high-level overview of npm scripts and its ability to create commands that, in turn, execute more than one other npm script command. As you can see, there’s a great deal of power here, and depending on your needs, they can streamline your front-end tooling process significantly. There’s much more detail available about npm scripts, and a great place to start is: https://docs.npmjs.com/misc/scripts. In the meantime, I hope that this article has provided you with enough information to get you up and running.