How to keep compiled files in a separate directory ?
Last Updated :
27 Apr, 2020
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...