How to keep compiled files in a separate directory ?

A web project containing HTML, CSS, JavaScript, Images, and Videos files. The task is to ensure that all the files of the project are compiled and bundled to one separate directly. Before we proceed, I would like to give you a brief introduction to parcel-bundler.

Parcel-bundler: It is a module that helps to transcribe our ES6+ syntax into a traditional JavaScript that is readable by all browser’s engine. Also, it helps to bundle our HTML file, CSS file, and JavaScript file into a single directory called “dist”. So that what we will be using to put our compiled files into one folder.

With the help of parcel-bundler, we would be able to achieve this by simply installing the parcel-bundler module into our project. Below explained steps will guide to the end to keep compiled files in a separate directory.

Prerequisite: The node.js is required, Installation of Node.js on Windows or Installation of Node.js on Linux.

  • Step 01: Initialize npm in your project.
    npm init
  • Step 02: Install parcel-bundler from the node registry
    npm install parcel-bundler
  • Step 03: Open your package.json file and make the below changes to your scripts object(add the below code to your script object).
    "scripts":{
        "dev": "parcel index.html",
        "build": "parcel build index.html",
        "watch": "parcel watch index.html"
        }

    The index.html is the HTML file, the path to the HTML file depends on your code structure e.g. /src/tem/index.html that contains the external JS and external CSS which we want to transcribe and compile to one dir. If you have multiple HTML files, just replace the index.html with *.html. The dev key is usually used to run your project while it’s still on the development phase and the build key inside the script object: the build key helps to build your project for production with the help of the build keyword close to the parcel keyword. The watch key helps to keep your project on automatic transcription & bundling as you make constant changes to your code.

  • Step 04: To run your project while on development phase.
    npm run dev
  • Step 05: To keep your project on a constant watch against any changes while still on the development phase
    npm run watch
  • Step 06: To run your project for production.
    npm run build
  • Output: After building your project, you should see a new folder called “dist”, this folder contains all the compiled files which can now be used for production.

Below example illustrates the whole steps:
Example:

  • Step 01: Create a folder called “GFG”.
  • Step 02: Open the folder in your desired IDLE or IDE.
  • Step 03: Inside the folder create a html file called “codeTrans.html” and insert the below html code into the html file.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>GeeksforGeeks | Transcribed JS to dir</title>
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <p>
                With geeksforgeeks, we wish to keep
                changing the difficulties in tech 
                into berry-pies ?
            </p>
            <button>Click me</button>
        </div>
        <script src="./js.js"></script>
    </body>
      
    </html>

    chevron_right

    
    

  • Step 04: Create a JavaSCript file inside the “GFG” folder and name it “js.js”.Add the below code into the javascript file.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    const geeks = () =>{
        const btn = document.querySelector('button');
          const para = document.querySelector('p');
          btn.addEventListener('click', () => {
            para.textContent +=
              '.GeeksforGeeks A Computer Science Portal';
          });
    }
    geeks();

    chevron_right

    
    

  • Step 04: Go to you package.json file and inside the script object,add the below code.
    "dev": "parcel index.html",
    "build": "parcel build codeTrans.html",
    "watch": "parcel watch codeTrans.html"
  • Step 05: To get the compiled file into one directory, open your IDE terminal and run the below code.
    npm run build
  • Output: A new folder called “dist” holding the compiled files.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.