I’m working with a jQuery-based template that has a specific folder organization, but I can’t figure out what build tool was used to set it up. Coming from an Angular2 background, this structure looks quite different from what I’m used to.
project-root/
src/
scripts/
styles/
bower.json
gulpfile.js
package.json
server.js
vendor.json
webpack.config.js
build/
resources/
*.html files
Could anyone help me understand what tooling creates this kind of setup? I need to start a fresh project with similar organization but I’m not sure which build system or generator to use. Any guidance would be really helpful.
This setup seems to be a custom build configuration that combines various tools rather than being generated by a single tool. The presence of both gulpfile.js and webpack.config.js suggests that Gulp is used for task automation, while Webpack takes care of module bundling. The vendor.json file likely manages third-party dependencies by concatenating libraries.
I’ve encountered similar configurations in legacy jQuery projects where teams incrementally integrated modern tools without fully transitioning to new frameworks. To replicate this structure, you could initialize npm, install Gulp and Webpack, and configure them appropriately. However, it may be worthwhile to reconsider the complexity—many projects in similar scenarios have reduced their setups to either Webpack or transitioned to modern tools like Vite. The server.js indicates a custom development server, which was more common prior to the adoption of webpack-dev-server as the standard.
yep, that setup looks way too complicated! you don’t need both Gulp and Webpack for jQuery. I’d suggest using Parcel or a simpler Webpack config. it’ll save ya a lot of time and confusion, trust me!
Interesting mix! What’s in that vendor.json file? I’ve seen setups like this - they’re usually built up over time. Are you trying to keep the exact same structure or can you simplify it? What features do you actually need for your new project?