How to automate client side bundling of javascript everytime I make change in the file

Question

I am creating a basic node js application with express and ejs template engine. I want to use npm libraries like axios in the views that I create. Is it possible to create bundle files from those

Edit 2 : What I wanted to ask here is there a way to create a bundled javascript file for the frontend that I was using with express now that can be done via parcel but I had to run parcel again and again and I could not use ejs as parcel just works with HTML. eventually I used gulp to bundle the javascript that I was using by watching my production javascript. The question was not clear but I found the solution to my problem and hope that it helps someone who is stuck like me.

*

old question : How to use parcel with ejs EDIT : I am not getting the data from the my server I am using a 3rd party client side sdk that makes request to their server. I am using enablex.io to do video calls. That is the reson I just want to import axios in a variable and use axios whenever I need to make that request that can be done via parcel if I write a static html page but how can I do that with any templating engine like ejs.

score 1 · Accepted Answer · answered Jun 20 '20 at 21:39

The answer is very simple you just have to use a taskrunner like gulp to watch the files that you want to bundle. That would create a perfect development environment paired with nodemon. Because as soon as you make any change in the frontend javascript file the bundled file will be generated by the task runner and that bundle file can be referenced in the main layout template or in any ejs template that you need.

Bonus: nodemon will restart the server automatically as soon as it detects change in the frontend file.

Here is the gulp file

const { src, dest, watch, series } = require('gulp');
const bro = require('gulp-bro');


const files={
    client: 'public/*.js',
    server:'server.js'
}

function client(){
    return src(files.client).
    pipe(bro()).
    pipe(dest('public/dist'))
}

function watchTask(){
    watch([files.client],client)
}

exports.default = series(client,watchTask)

Here is the link to repository of a sample file :

https://github.com/jaydave1412/ejs-frontend-backend/blob/master/gulpfile.js

How to automate client side bundling of javascript everytime I make change in the file

1 Answers1