ASP.net 5 Series tutorial (v): Using grunt, Bower to develop Web programs in Visual Studio 2015 __.net

Based on Visual Studio 2015, you can: easily manage front-end packages such as jquery, Bootstrap, or angular. Automate tasks such as less, JavaScript compression, jslint, JavaScript unit tests, and more. Easy access to the Web Developer Ecosystem Toolkit.

To implement these scenarios, Visual Studio 2015 has built in a number of popular Third-party toolkits: Bower:web Package Manager, Bower can help you install front-end packages, including JavaScript, CSS class libraries. For server-side packages, manage them through the NuGet package. Grunt and Gulp:grunt and Gulp are running tasks based on JavaScript. If you have not used a similar function, you can think of it as an automatic dispatch run of the App,asp.net 5 project template using the grunt run task. NPM (Node Package Manager). NPM is a node package manager that was initially used for Node.js package management. The above bower, Grunt, Gulp used 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 ASP.net 5.0 Starter Web

To create a asp.net MVC 6 app, the engineering file structure is as follows:

The project includes the following important configuration files: Project.json. master project files, NuGet package dependencies list. Package.json. NPM Package list. Bower.json. Bower Package list. Gruntfile.js. Configure grunt tasks.

static files and wwwroot

The Wwwroot folder is new in ASP.net 5.0, and all of the static files in the project are stored here. and clients can access these files directly, including HTML files, CSS files, images files, JavaScript files. The Wwwroot folder is the root of the Web site, such as this domain http://hostname/point to the Wwwroot folder.

The code should be stored outside wwwroot, including C # files, razor files, wwwroot folders to implement code files, static file isolation. Compiles coffeescript or typescript files as JavaScript. Compile less or Sass files as CSS. Compresses JavaScript. Optimizes the image file.

The above operation will compile the code files outside the Wwwroot folder and 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-*",
    //...
 }

Use Bower for front-end package management

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

Open Bower.json and add the Requirejs entry in 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 the minimum 1.10.2 version, or any 1.10 of the latest patches. For more details, please check out the github:https://github.com/npm/node-semver.

Under Visual Studio 2015, you can obtain a list of available packages using IntelliSense:

You can also get Smart tips for package version numbers

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

The installation details can be viewed from the output form. The package is installed in the Bower_components folder.

Visual Studio automatically loads the corresponding version of the package in your solution. This 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 engineering template includes such tasks as the Bower Package Manager.

Below we use grunt to add less processing, compilation 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, 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 less properties. Install a task, create a grunt task, or reuse an existing one. Configure the task in the grunt file. Binding 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 "
    }
}

When you enter, you will also see a list of available packages:

The same can be IntelliSense published this number:

In the solution, click Dependencies > NPM and you can see that grunt-contrib-less has been listed but is not currently installed.

Click the right button to Restore Packages.

The Gruntfile.js file for installation is as follows:

Module.exports = function (grunt) {
    grunt.initconfig ({
        bower: {
            install: {
                options: {
                    targetDir: " Wwwroot/lib ",
                    layout:" Bycomponent ",