ASP. NET 5 Series tutorials (5): Use Grunt and Bower in Visual Studio 2015 to develop Web programs, gruntbower

ASP. NET 5 Series tutorials (5): Use Grunt and Bower in Visual Studio 2015 to develop Web programs, gruntbower

Based on Visual Studio 2015, you can:

• Convenient Management of front-end packages, such as jQuery, Bootstrap, or Angular.
• Automatically run tasks, such as LESS, JavaScript compression, JSLint, and JavaScript unit tests.
• A toolkit for the Web Developer ecosystem.

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

• Bower: Web Package Manager. Bower can help you install front-end packages, including JavaScript and CSS class libraries. Use NuGet to manage server packages.
• Grunt and Gulp: Grunt and Gulp are JavaScript-based running tasks. If you have not used similar functions, you can think of it as an app for automatic scheduling and the ASP. NET 5 Project template uses Grunt to run tasks.
• Npm (Node Package Manager). npm is a node Package Manager that was initially used for Node. js Package management. The Bower, Grunt, and Gulp mentioned above use npm.

 

Start Visual Studio 2015, create an ASP. NET 5.0 project, select File> new project> Visual C #> Web> ASP. NET Web application:

 

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

 

Create an ASP. net mvc 6 app. The project file structure is as follows:

 

This project includes the following important configuration files:

• Project. json. Main Project file, NuGet package dependency list.
• Package. json. npm package list.
• Bower. json. Bower package list.
• Gruntfile. js. Configure the Grunt task.

 

Static files and wwwroot

The wwwroot folder is added in ASP. NET 5.0. All static files in the project are stored here. The client can directly access these files, including HTML files, CSS files, Images files, and JavaScript files. The wwwroot folder is the root directory of the website, such as the domain name.http://hostname/Point to the wwwroot folder.

The Code should be stored outside wwwroot, including C # And Razor files. The wwwroot folder is used to isolate code files and static files.

• Compile the CoffeeScript or TypeScript file as JavaScript.
• Compile the LESS or Sass file as CSS.
• Compress JavaScript.
• Optimized the image file.

The above operations will compile the code files outside the wwwroot folder and copy them to the wwwroot folder so that the front-end can access them. These steps can be automatically executed through task scheduling.

{    "webroot": "wwwroot",    "version": "1.0.0-*",    // ... }

 

Use Bower for front-end package management

Next, let's take a look at how to use Bower in Visual Studio 2015 for front-end package management. In this section, we use Tianjin RequireJs class library for 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 syntax mode of the bower version is major. minor. patch. In ^ 2.1, the character '^' specifies the minimum version number. '~ 1.10.2 'is used to specify the minimum version of 1.10.2 or any latest patch of 1.10. For more details, see Github: https://github.com/npm/node-semver.

In Visual Studio 2015, you can use smart sensing to obtain a list of available packages:

 

You can also get a smart prompt for the package version number.

 

Install the latest package. In solution view, clickDependenciesAnd thenBowerFolder, right-clickRestore Packages.

 

You can view the installation details in the Output form. Package is installed in the bower_components folder.

Visual Studio automatically loads packages of the corresponding version in your solution. In this way, the package file does not need to be uploaded to the source code management.

 

Run Task Scheduling with Grunt

Use the gruntfile. js file to define Grunt tasks. The default Project template includes such tasks, such as the Bower Package Manager.

Next we will use Grunt to add LESS processing and compilation processes.

Create a folder assets under the project.

Right-click the assets folder and selectAdd>New Item. In the create Item dialog box, select the LESS Style Sheet file and name it "site. less ".

Paste the following code to the site. less file:

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

Use@ BaseThe variable defines the color value. This variable is used for the LESS feature.

• Install a task, create a Grunt task, or reuse an existing task.
• Configure the task in the Grunt file.
• Bind a task to a 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 the package, you will also see the list of available packages:

Likewise, you can intelligently perceive the publication ID:

 

In solution, clickDependencies>NPM, You can seeGrunt-contrib-less has been listed, but it has not been installed yet.

Right-click,Restore Packages.

The installed gruntfile. js file is as follows:

module.exports = function (grunt) {    grunt.initConfig({        bower: {            install: {                options: {                    targetDir: "wwwroot/lib",                    layout: "byComponent",                    cleanTargetDir: true                }            }        },        // Add this JSON object:        less: {            development: {                options: {                    paths: ["Assets"],                },                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 plug-in has its own set of configuration items. For example, we can configure grunt-contrib-less to compile it into the assets/site. less file, and then copy it to wwwroot/css/site.css.

LoadNpmTasks Method

Load a task from the Grunt plug-in. The project template loads the grunt-bower-task by default. Addgrunt-contrib-less。

In solution view, right-click gruntfile. jsTask Runner Explorer

Select the Task Name "less" and click Run to Run the task:

 

The output window runs as follows:

 

Open the/wwwroot/css/site.css file. The compiled CSS file is as follows:

body {  background-color: #008080;}

Run the program. The background color has been modified by the actual color:

Configure Automatic run: PassBindings>After Build, you can configure automatic running.

 

 

Original article: Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower