Menu icon Foundation
Copy some JS files into Dist WITHOUT bundling into app.js?

Overall, I'm liking having gulp bundle all the individual JS files into app.js 

However I have one or two pages on the site that use very specific JS files, such as a registration form page. 

It doesn't seem like good practice to bundle those JS files into the app.js file, where they'll be loaded for every page on the site but aren't needed. Many users will never visit that page, so why should they all be loading extra JS? 

It seems like it'd be better to keep those files separate and just copy them across to the dist file (maybe compressed). Is there a recommended way to do that? Just putting them in the dist folder won't work, as they get deleted each time. 

Eg:

- If I put JS files in the Assets folder but outside the JS folder, will they avoid being put into app.js? 

- Alternatively, is there a way to define which JS files will be bundled into while dist JS files? 
So I could have the general JS files bundled into the app.js file, but the registration page specific JS files budled into registration or something like that. 

Does Babel or Foundation's gulpfile provide that kind of functionality? 

FoundationF6Babeljavascriptapp.jsbundling

Overall, I'm liking having gulp bundle all the individual JS files into app.js 

However I have one or two pages on the site that use very specific JS files, such as a registration form page. 

It doesn't seem like good practice to bundle those JS files into the app.js file, where they'll be loaded for every page on the site but aren't needed. Many users will never visit that page, so why should they all be loading extra JS? 

It seems like it'd be better to keep those files separate and just copy them across to the dist file (maybe compressed). Is there a recommended way to do that? Just putting them in the dist folder won't work, as they get deleted each time. 

Eg:

- If I put JS files in the Assets folder but outside the JS folder, will they avoid being put into app.js? 

- Alternatively, is there a way to define which JS files will be bundled into while dist JS files? 
So I could have the general JS files bundled into the app.js file, but the registration page specific JS files budled into registration or something like that. 

Does Babel or Foundation's gulpfile provide that kind of functionality? 

Jordan Bommelje over 3 years ago

How I usually do this, is I create a "components" folder in the assets folder and add the JS file there. This will copy into the dist folder without being added to the app.js file based on the standard Gulp file. Then, reference that JS file in the page you want to use it. Let me know if that makes sense!

bill over 3 years ago

That makes sense. I'll give it a go. 

[edit] Seems to work nicely. Many thanks!