ASP. NET 5 Series tutorial (V): Developing Web Programs using Grunt, bower in Visual Studio 2015

Based on Visual Studio 2015, you can:

• Convenient management of front-end packages such as jquery, Bootstrap, or angular.
• Automate tasks such as less, JavaScript compression, jslint, JavaScript unit testing, and more.
• Easy access to the Web Developer Ecosystem Toolkit.

To implement these scenarios, Visual Studio 2015 has built in some popular third-party toolkits:

• Bower:web Package Manager, Bower can help you install the front-end package, including JavaScript, CSS class library. For server-side packages, manage through nuget packages.
• Grunt and Gulp:grunt and Gulp are JavaScript-based running tasks. If you have not used a similar function, you can think of this as an auto-Dispatch run App,asp.net 5 project template using the grunt run task.
• NPM (Node package Manager). NPM is a node package manager that was originally used for node. js Package Management. Above said Bower, Grunt, Gulp used to NPM.

Start Visual Studio 2015, create a new project for ASP. NET 5.0, select File-New project->visual c#->web->asp.net WEB application:

In the New Project dialog box, select the ASP. 5.0 Starter Web

To create an ASP. NET MVC 6 app, the project file structure is as follows:

Under this project, the following important configuration files are included:

• Project.json. master project file, NuGet package dependency Checklist.
• Package.json. NPM Package list.
• Bower.json. Bower Package list.
• Gruntfile.js. Configure the grunt task.

static files and Wwwroot

The Wwwroot folder is new in ASP. NET 5.0, where all the static files in the project are stored. And the client can directly access these files, including HTML files, CSS files, images files, JavaScript files. The Wwwroot folder is the root directory of the Web site, such as the domain name pointing to the http://hostname/ wwwroot folder.

The code should be stored outside of wwwroot, including C # files, razor files, wwwroot folders for code files, static file isolation.

• Compile the Coffeescript or TypeScript file as JavaScript.
• Compile less or Sass files as CSS.
• Compress JavaScript.
• Optimizes image files.

The above operation will compile the code files outside the Wwwroot folder and then copy them to the Wwwroot folder so that the front-end can be accessed. These steps can be performed automatically through task scheduling.

{    "Webroot": "Wwwroot",    "version": "1.0.0-*",    //  ... }

Using Bower for front-end package management

Let's look at how to use bower for front-end package management in Visual Studio 2015, in this section, our Tianjin Requirejs class library to the app.

Open the Bower.json and add the Requirejs entry to the Dependencies section.

"Dependencies": {        "bootstrap": "~3.0.0",        "jquery": "~1.10.2",        " Jquery-validation ":" ~1.11.1 ",        " jquery-validation-unobtrusive ":" ~3.2.2 ",        " Requirejs ":" ^2.1 "    },

Note: The Bower version syntax mode is "Major.minor.patch". In ^2.1, the character ' ^ ' specifies the minimum version number. ' ~1.10.2 ' is used to specify a minimum of 1.10.2 version, or any 1.10 of the latest patches. For more details, please see github:https://github.com/npm/node-semver.

Under Visual Studio 2015, you can use IntelliSense to get a list of available packages:

You can also get smart hints for the package version number

Now install the latest package, in Solution View, click Dependencies, and then right-click the Bower folder on the Restore Packages.

You can view the details of the installation through the output form. The package is installed to the Bower_components folder.

Visual Studio will automatically load the corresponding version of the package in your solution. So that the package file will not be uploaded to the source management.

Running task scheduling with grunt

Using the Gruntfile.js file to define the grunt task, the default project template includes such tasks as the Bower Package Manager.

Let's use grunt to add less processing and compiling the process.

Under Engineering, create a folder assets.

Right-click on the Assets folder and select Add > New Item. In the New Item dialog box, select the less Style sheet file, which is named "Site.less".

Paste the following code into the Site.less file

@base: teal;body {    background-color: @base;}

Use the @base variable to define the color value, which is used for the less attribute.

• Install the task, create a grunt task, or reuse an existing one.
• Configure the task in the grunt file.
• Bind task to Visual Studio compilation task

In the Package.json file, configure the Grunt-contrib library.

{    "version": "0.0.0",    "name": "MyApp",    "Devdependencies": {        " Grunt ":" ^0.4.5 ",        " Grunt-bower-task ":" ^0.4.0 ",        //  ADD this:        "grunt-contrib-less": "^0.12.0"    }}

As you type, you'll also see a list of available packages:

The same can be IntelliSense publication number:

In the solution, click Dependencies > NPMand you can seegrunt-contrib-less已经被列出来，但是目前尚未安装。

Right-click,Restore Packages.

The installation of the completed Gruntfile.js file is as follows:

Module.exports =function(Grunt) {grunt.initconfig {bower: {install: {options: {TA Rgetdir:"Wwwroot/lib", layout:"Bycomponent", Cleantargetdir:true                }            }        },        //ADD This JSON object:Less : {development: {options: {paths: ["Assets"], the files: {"Wwwroot/css/site.css": "Assets/site.less" }            },        }    }); Grunt.registertask ("Default", ["Bower:install"]); Grunt.loadnpmtasks ("Grunt-bower-task"); //Add This line:Grunt.loadnpmtasks ("Grunt-contrib-less");};

Initconfig method

Use the Initconfig method to configure the grunt task. Each grunt plugin has his own collection of configuration items. For example, we can configure grunt-contrib-less to compile the assets/site.less file and then copy it to Wwwroot/css/site.css.

Loadnpmtasks method

Loading the task from the grunt plugin, the project template loads the Grunt-bower-task by default. The following adds agrunt-contrib-less。

在解决方案视图，选择gruntfile.js  右键Task Runner Explorer

By selecting the task name "less", click Run:

The Output window runs as follows:

Open the/wwwroot/css/site.css file to see the following compiled CSS file:

body {  background-color: #008080;}

Running the program, the background color has been modified by the true colors:

Configure Autorun: Configure auto-run with Bindings > after Build.

Original link: Manage client-side Web Development in Visual Studio, Using Grunt and Bower

ASP. NET 5 Series tutorial (V): Developing Web Programs using Grunt, bower in Visual Studio 2015