ASP. NET 5 Series tutorial (v): Using Grunt, Bowe in Visual Studio 2015
Source: Internet
Author: User
Based on Visual Studio 2015, you can:
Convenient management of front-end packages, such as jQuery, Bootstrap, or Angular.
Run tasks automatically, such as LESS, JavaScript compression, JSLint, JavaScript unit testing, etc.
Conveniently obtain a toolkit for the web developer ecosystem.
To achieve these scenarios, Visual Studio 2015 has built-in some 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, please use NuGet package management.
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 app that automatically schedules and runs. The ASP.NET 5 project template uses Grunt to run tasks.
npm (Node Package Manager). npm is a node package manager that was originally used for Node.js package management. Bower, Grunt, and Gulp mentioned above use npm.
Start Visual Studio 2015, create a new ASP.NET 5.0 project, select File-> New Project-> Visual C #-> Web-> ASP.NET Web Application:
In the New Project dialog box, select ASP.NET 5.0 Starter Web
Create an ASP.NET MVC 6 app, the project file structure is as follows:
The project includes the following important configuration files:
Project.json. Main project file, NuGet package dependency list.
package.json. npm package manifest.
bower.json. Bower package manifest.
gruntfile.js. Configure Grunt tasks.
Static files and wwwroot
The wwwroot folder is new in ASP.NET 5.0, and all static files in the project are stored here. 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 website, such as this domain name http: // hostname / points to the wwwroot folder.
The code should be stored outside wwwroot, including C # files and Razor files. The wwwroot folder is used to isolate code files and static files.
Compile CoffeeScript or TypeScript files to JavaScript.
Compile LESS or Sass files into CSS.
Compress JavaScript.
Optimize image files.
The above operation will compile the code files outside the wwwroot folder, and then copy it 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 see how to use Bower for front-end package management in Visual Studio 2015. In this section, our Tianjin RequireJs class library is given to the app.
Open bower.json and add requirejs entry in the dependencies section.
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 a minimum version of 1.10.2, or any latest patch of 1.10. For more details, please check 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 tips for package version numbers
Now install the latest package, in the solution view, click Dependencies, then right-click on the Bower folder and click Restore Packages.
You can view the installation details through the Output window. The package is installed to the bower_components folder.
Visual Studio will automatically load the corresponding version of the package in your solution. In this way, the package file does not need to be uploaded to the source code management.
Run task scheduling using Grunt
The gruntfile.js file is used to define Grunt tasks. The default project template includes such tasks, such as the Bower package manager.
Below we use Grunt to add LESS processing and compilation process.
Under the project, 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 and name it "site.less".
Paste the following code into the site.less file
-
Use the @base variable to define the color value. This variable is used for LESS features.
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"
"grunt-contrib-less": "^ 0.12.0"
As you type, you will also see a list of available packages:
It can also intelligently sense the version number:
In the solution, click Dependencies> NPM, you can see that grunt-contrib-less is listed, but it has not been installed yet.
Right click, Restore Packages.
The gruntfile.js file after installation is as follows:
Use the initConfig method to configure Grunt tasks. Each Grunt plugin has its own set of configuration items. For example, we can configure grunt-contrib-less to compile to assets / site.less file, and then copy to wwwroot / css / site.css.
loadNpmTasks method
Load the task from the Grunt plugin, and the project template loads grunt-bower-task through this by default. Add a grunt-contrib-less below.
In the solution view, select gruntfile.js and right-click Task Runner Explorer
Select the task name "less" and click Run to run:
The output window runs as follows:
Open the /wwwroot/css/site.css file, you can see the compiled CSS file as follows:
-color: # 008080
Running the program, the background color has been modified by the real color:
Configure automatic running: You can configure automatic running through Bindings> After Build.
Original link: Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower
ASP.NET 5 series of tutorials (5): Use Grunt and Bowe in Visual Studio 2015
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
