Split all javascript from index.html into separate files
Closed this issue · 7 comments
One potential structure of the tool would could be to have each of the preview panels (text preview, audio preview, image preview, etc.) as their own .js file, and similar for different parts of the ui, such as the menu for loading and in future saving wads.
Have you considered using something like Webpack and bundling everything together in a build step?
@oksas Right now I think something like Grunt would be more useful for minifying files while everything is refactored. When there's a solid API then something like Webpack can be used. Of course it isn't my project, but that's just my opinion.
Yeah, not that the library and ui is growing like this I want to at least minify everything into one (well, two: wad.js and the ui js). It's my first time doing such though, so I'll definitely defer to more experienced js developers on what the most appropriate approach is for this!
Just committed it. It's pretty straight forward. I'm assuming you're on Windows so I can't really be more specific. Install npm. Then install the grunt-cli via npm. You should be able to run npm install in the root directory to get the required plugins. At that point, just run grunt to uglify the files. To change what files are uglified, open up Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
files: {
'dist/wad.min.js': ['src/wad.js', 'src/mapdata.js'],
'dist/ui.min.js': ['src/ui/create_el.js', 'src/ui.js']
}
}
}
});
As you can see, I have it set up so that they're separate as you asked. When you start refactoring it, just add the destination files (order matters. I used how they were laid out in the index.html as a guide.)
Excellent, thanks for this. I'll get the pull request merged and start my refactoring work tomorrow probably.
Done. Grunt seems perfect for the job. Thanks again!
Cool, Grunt definitely does the job! I guess the reason I initially said Webpack over Grunt/Grulp is that I figured the UI would eventually use something more robust and maintainable than jQuery, and Webpack is pretty well suited for dealing with that stuff (including minification). But one step at a time!