Why Not Use ScriptBundles?
ScriptBundles and StyleBundles are a great tool that allow you to configure and deliver resources to your visitors in a compressed package to reduce or even eliminate extra requests to your web server. These features allow you to define a bundle of resources in an xml-based config file or configuration classes like BundleConfig.cs This approach, while easy to configure, requires the web service execute server-side code in order to configure and deliver these resources. The alternative approach described below, completes this work one time during the build process and delivers static files every time to the requestor. This approach will also prepare your assets for use on Cordova, WinJS, or ASP.NET Core where you don’t have the bundling capabilities. Finally, because we are using package managers to manage our scripts and styles, we can get new versions with fixes and features installed easily with the help of these tools.
Introducing npm, gulp, and bower
These three tools provide the building blocks for browser-side coding in our application. Let’s take a quick look at each tool and what it does:
- npm is the Node Package Manager. This is the NuGet equivalent in the Node platform and can install other Node tools and components, including the other two listed below.
This walk-through focuses on the default ASP.NET 4.6 template and converting those resources to use this acquisition and build mechanism.
Step 1 – Configure npm
Nope.. Step 1 is not install NodeJS, because if you’re using Visual Studio 2015 its already installed for you in C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Web Tools\External We can move forward and start configuring the node package manager for our project. In the Visual Studio Solution Explorer window, Add a New Item to the base folder of your project, and choose npm Configuration File. You’ll probably notice that the other configuration files we’re going to use are in the list as well: Bower Configuration File and Gulp Configuration File. Go ahead and add those to your project as well.
Starting with the package.json file, we can see that there isn’t a lot in the base file to start. Thanks to the intellisense features built into Visual Studio, we’re going to get some help in building out the list of devDependencies at the bottom of the file.
Inside of the devDependencies block, lets enter a JSON name-value pair for the gulp package. As you start typing “gulp”: the Visual Studio editor should begin showing some intellisense hints of the list of packages and versions available. Choose the latest version of Gulp, and lets also add references for the gulp-concat, gulp-cssmin, and gulp-uglify packages. My package.json file looks like this:
You can now right-click on the package.json file in your solution explorer and choose to ‘Restore Packages’ and Visual Studio will run the npm install command to acquire and make these packages available to you in a new “node_modules” folder.
Step 2 – Configuring Bower
Since we already added a bower.json template in the previous step, we work with that file to begin adding package references to match those that were installed by NuGet into our project. There are two ways to do this: right-click bower.json and open the bower package manager UI or you can edit the bower.json file by hand. In both scenarios, you need to add the bootstrap, jquery, modernizer, and respond packages to your configuration. In my bower.json file, I added the matching version numbers of these packages so that they match the default version numbers in the ASP.NET template:
If you keyed in the package names like I did, you can perform a similar right-click action on the bower.json file to restore packages. This will create the bower_components folder in your project folder and fill it with the files from these packages.
Step 3 – Configure Bootstrap and My CSS with Gulp
Next, start writing the gulp task called “min-css” with the following content:
Step 5 – Update the Master page
In the Master page, you can remove all references to the bundles and replace them with direct references to the scripts and styles:
You can also remove the configuration of bundles in the App_Start\BundleConfig.cs file to reduce some processing at application start up.
This is nice, but what happens when I add more to that site CSS file? I need to re-run the min-css step, where ASP.NET would just recompile it each time.
Step 6 – Configure Gulp-Watch
You can configure gulp to watch files for an update and when that update occurs, trigger tasks to be processed. This feature can be activated with the watch method on the gulp object. I like to create a task called simply watch and have that task run in the background while I code. Here is the code for my watch task in this project:
This method takes an array of file globs and an array of tasks to execute if it detects a change in any of the files referenced. Now, when I change my site.css file, the minified version is regenerated very quickly. The Task Runner Explorer makes this even easier to use, because I can bind my watch task to the ‘Project Open’ event so that the tasks runs whenever I open this project. To enable this event binding, right-click on the ‘watch’ task in the Task Runner Explorer and choose “Bindings – Project Open”