How to use npm Scripts as a Build Tool ?

Last Updated : 24 Apr, 2024

In the world of JavaScript development, npm (Node Package Manager) isn't just for installing packages. It also allows you to define and run scripts to automate various tasks within your project. One can make use of npm packages within your scripts to extend functionality. For instance, you can employ packages like cross-env to set environment variables cross-platform. These scripts are housed in the package.json file, which acts as a central configuration hub for npm-managed projects.

Why Choose NPM Scripts for Builds?

In summary, npm scripts provide a lightweight yet powerful solution for automating your project builds. By defining simple commands in your package.json file, you can streamline your development workflow and spend more time coding and less time managing build tools.

Simplicity: NPM scripts offer a straightforward approach to building your projects. No need to juggle multiple build tools or configurations.
Integration: Since npm scripts are part of the npm ecosystem, they seamlessly integrate with your existing workflow. No extra installations are NPM required!
Customization: With npm scripts, you have the flexibility to tailor your build process to suit your project's unique requirements.

Steps to create NPM scripts:

Let's walk through the process of setting up npm scripts for a basic HTML, CSS, and JavaScript project:

Initialize a new npm project:

Begin by initializing a new npm project within your project directory:

npm init -y

This command creates a package.json file with default settings.

Define your build scripts:

For a simple project involving HTML, CSS, and JavaScript(code given below), you can set up scripts to copy files from the src directory to the dist directory.

Now, let's define the npm script in the package.json file. Open package.json and add the following:

"scripts": {
  "build": "mkdir -p dist && cp src/index.html dist/ && cp src/style.css dist/ && cp src/script.js dist/"
}

Here, the build script creates a dist directory (if it doesn't exist) and copies the HTML, CSS, and JavaScript files from the src directory to the dist directory.

Run the Project:

To run an HTML file with live-server, you can use the live-server package. First, you need to install it globally (if you haven't already) using npm:

npm install -g live-server

After installing live-server, you can use it to serve your HTML file by navigating to the directory containing your HTML file in your terminal and running:

live-server

This command will start a local server and open your default web browser to display your HTML file. It also provides features like live reloading, so any changes you make to your HTML file

Note: You can also run this project By Right clicking on index.html file by clicking on "Open with Live Server"

Screenshot-from-2024-04-11-16-30-20

Run your build script:

Execute your build script using the npm run command followed by the script name:

npm run build

This command triggers the defined build tasks, generating a distribution-ready version of your project in the dist directory.

Package.json file:

Screenshot-from-2024-04-11-16-35-02 — package.json

Folder Structure:

Screenshot-from-2024-04-11-16-21-14

Example: To demonstrate creating an simple JavaScript project and using the npm script as build tool in it.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>My Project</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>GeeksforGeeks!</h1>
    <script src="script.js"></script>
</body>

</html>

CSS

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: green;
}