As I work on my MVC 6 app, I am exploring a new approach to replacing the older js/css bundling & minification system. My goal is to generate a single javascript file that can be easily referenced in my HTML. However, this javascript file needs to be specific to each page or action, so simply concatenating all .js files in a folder won't suffice.
I have successfully achieved this with CSS (using LESS) by utilizing @import. This allows me to create a .css file that combines the original .less file with all the imports into one consolidated file. Now, I am seeking a similar solution for my .js files.
In GULP, I can minify individual files and organize them in their respective folders, but the challenge lies in merging them correctly. I prefer not to create separate gulp tasks for each file/js specifying what needs to be concatenated.
One idea I had was to use TypeScript for referencing other js files and then compiling them into a single file with GULP. However, this approach seems more complex. I am also open to exploring other frameworks that can help streamline this process.
Interestingly, when using typescript's ///reference or import module, it does not function like it does in LESS where imports are automatically included during compilation.
For instance, consider the following js or typescript structure:
scripts/common/master.js (or .ts etc.)
scripts/maincontroller/index.js (utilizes master.js)
scripts/maincontroller/support.js (also utilizes master.js)
desired outcome post compile/merge/concat with gulp:
wwwroot/js/common/master.js (remains unchanged)
wwwroot/js/maincontroller/index.js (combined with master.js)
wwwroot/js/maincontroller/support.js (combined with master.js)