How do I unbundle a bundle with gulp MVC 6 for debugging?

Question

I have a rather large Angular app that has a lot of javascript files dispersed in a tree in my project. It's an MVC 5 project that I've converted with these instructions to MVC 6 to use Browserify. Everything seems to work great, except that I need to not use a bundle in my development builds and instead include every script file separately. These articles show mildly different ways to replace a bundle with static markup depending on an environment variable, but I'd have to specify every file individually for the debug version. Is there some way to dynamically specify which files to include?

Answer 1

You should use environment tag helpers.

The environment helpers allows us to conditionally render scripts based on the environment. (Minified-Bundled version vs All Un minified version)

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/ScriptForPage1.js"></script>
    <script src="~/js/SomeOtherScript.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
    </script>         
    <script src="~/js/CombinedVersionOfAllScripts.min.js" asp-file-version="true"></script>
</environment>

Make sure that you have invoked the UseStaticFiles() method inside the Configure() method(inside Startup.cs). This extension method enables static file serving including js files,css files etc..

Take a look at this post to understand how to minify your js file using gulp

---

If have 100+ js files and you do not wish to add one script tag for each of your script files, you can consider bundling all the files into one single file and use that.

To do this, add a new gulp task to your gulpfile.js

paths.bundledJsDest = paths.webroot + "js/bundledSingleFile.js";

gulp.task("bundleAllScriptsToOne", function () {
    gulp.src([paths.js, "!" + paths.minJs, "!" + paths.bundledJsDest])
        .pipe(concat(paths.bundledJsDest))
        .pipe(gulp.dest("."));
});

Now open the Task runner (View->Other Windows->Task Runner Explorer), Right click on this new task we created(bundleAllScriptsToOne) and select Run.

This will genearate a new js file called bundledSingleFile.js. The content of this will be script content from all other script files inside the js folder(except the minified ones). You can include this single file in your layout inside Development environment. You can use the minified one(generated by another gulp task) in your Production environment.

<environment names="Development">
    <script src="~/js/bundledSingleFile.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="~/js/yourSite.min.js" asp-file-version="true"></script>
</environment>

If you wish to get all the scripts from another folder(or a sub folder), just update the path you pass to the gulp.src()

If you do not wish to manually run this gulp task every time, You may select Bindings -> Before build so that this will automatically run that particular gulp task every time you build your project.