![\"Gulp](\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/GulpBowerNpm-300x262-1.png\")
These three tools provide the building blocks for browser-side coding in our application.\u00a0 Let’s take a quick look at each tool and what it does:<\/p>\nVisual Studio 2015 brought a set of tools into the IDE from the Node environment that are great for web developers to use.\u00a0 Many folks who build JavaScript applications or single-page-applications were eager to see the introduction of these tools to Visual Studio.\u00a0 Can the tried and true ASP.NET Web Forms framework use Gulp, npm, bower, and the Task Runner Explorer?\u00a0 In this blog post, we’ll take a look at how we can replace the ‘out of the box’ use of the Script Manager in a Web Forms app with these node-based tools.<\/p>\n
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.\u00a0 These features allow you to define a bundle of resources in an xml-based config file or configuration classes like BundleConfig.cs\u00a0 This approach, while easy to configure, requires the web service execute server-side code in order to configure and deliver these resources.\u00a0 The alternative approach described below, completes this work one time during the build process and delivers static files every time to the requestor.\u00a0 This approach will also prepare your assets for use on Cordova, WinJS, or ASP.NET Core where you don’t have the bundling capabilities.\u00a0 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.<\/p>\n
These three tools provide the building blocks for browser-side coding in our application.\u00a0 Let’s take a quick look at each tool and what it does:<\/p>\n
This walk-through focuses on the default ASP.NET 4.6 template and converting those resources to use this acquisition and build mechanism.<\/p>\n
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.0Common7IDEWeb ToolsExternal\u00a0\u00a0 We can move forward and start configuring the node package manager for our project.\u00a0 In the Visual Studio Solution Explorer window, Add a New Item to the base folder of your project, and choose npm Configuration File.\u00a0 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.\u00a0 Go ahead and add those to your project as well.<\/p>\n
Starting with the package.json file, we can see that there isn’t a lot in the base file to start.\u00a0 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.<\/p>\n
Inside of the devDependencies block, lets enter a JSON name-value pair for the gulp package.\u00a0 As you start typing “gulp”: the Visual Studio editor should begin showing some intellisense hints of the list of packages and versions available.\u00a0 Choose the latest version of Gulp, and lets also add references for the gulp-concat, gulp-cssmin, and gulp-uglify packages.\u00a0 My package.json file looks like this:<\/p>\n 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.<\/p>\n 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.\u00a0 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.\u00a0 In both scenarios, you need to add the bootstrap, jquery, modernizer, and respond packages to your configuration.\u00a0 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:<\/p>\n 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.<\/p>\n Next, we need to write some JavaScript in the gulpfile.js file to dictate the tasks that need to be accomplished to build our client-side resources.\u00a0 The initial gulpfile starts with a line to require(“gulp”) and we will need to require those other gulp-* libraries that were referenced by npm.\u00a0\u00a0\u00a0 Those lines will look like the following:<\/p>\n Next, start writing the gulp task called “min-css” with the following content:<\/p>\n The task is defined with the task method on the Gulp object, submitting a name for the task and an function that should be executed for this task. Each step of this task’s function is a call from the gulp object through a series of pipes.\u00a0 In Gulp, content is piped from one step to the next using the pipe function.\u00a0 The first steps on lines 14,15 grabs the contents of the Bootstrap fonts folder and copies it to the fonts folder in the project.\u00a0 The second step on lines 17,18 does the same thing with the JavaScript files for bootstrap.\u00a0 The final steps in lines 21-25 do some extra steps besides copying content. In this last step, the contents of the bootstrap.min.css file and the site.css file are to be processed.\u00a0 These two files are marked up in the src method as an array of strings and are then piped into the concat command.\u00a0 Concat will take the contents of the pipe and combine them into one file at the location submitted, in this case the Content\/site.min.css file.\u00a0 Those contents are then passed into the cssmin function which will optimized the content of the CSS files by eliminating spaces, tabs and comments.\u00a0 This makes it smaller for transport and easier to download 1 file than multiple files.\u00a0 The final method, gulp.dest indicates that the results of the cssmin operation should be written back to that site.min.css file. At this point, we can run this step in the Task Runner Explorer window in Visual Studio by right clicking on the ‘min-css’ task on the left side and choosing Run. This will run the task in the extra window pane of the Task Runner Explorer, and you should quickly have Bootstrap configured with a minimized CSS stylesheet at site.min.css Step 4 – JavaScript Configuration The JavaScript processing is a little more involved than the CSS, but reuses some of the same tasks we just learned about.<\/p>\n This time, we’re going to assemble a collection of these files into one JavaScript file.\u00a0 For each of these five steps,\u00a0 we’re going to move files into the Scripts folder.\u00a0 For the jQuery, Modernizr, and Respond libraries it\u2019s a straight copy into the Scripts folder.\u00a0 With the MSAjaxBundle and WebFormsBundle, we’re going to take some steps before copying.\u00a0 These two bundles are originally added to your project through NuGet packages and bring a significant number of JavaScript files to your project.\u00a0 Let’s do something to simplify that.<\/p>\n Each of these steps for MSAjaxBundle and WebFormsBundle collects a group of JavaScript files by using a wildcard in the src function.\u00a0 They then pipe those contents into the concat function to make one big JavaScript file named MSAjax.min.js or WebForms.min.js accordingly.\u00a0 The contents of those files are then piped into the uglify function, a function that minifies JavaScript by eliminating spaces, comments, and reduces the name of variables in JavaScript to a single character.\u00a0 Finally, those contents are saved back to disk in the same way that our CSS was with the gulp.dest method.<\/p>\n We can now run this js task in the Task Runner Explorer window and see it produce the five JavaScript files for our project:<\/p>\n![\"initialPackageJson\"](\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/initialPackageJson-1.png\")
<\/a><\/p>\nStep 2 – Configuring Bower<\/h2>\n
Step 3 – Configure Bootstrap and My CSS with Gulp<\/h2>\n
![\"Initial](\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/gulpFile1-1.png\")
<\/p>\n