VS2015 Vnext Study notes 02:bower and Grunt

1. Overview

(First of all, my English proficiency is limited, professional terminology is not appropriate translation, so some words or not translated as well)

Bower: A "Web package management" that allows you to install and restore client packages, including JavaScript and CSS libraries. For server-side libraries like the MVC 6 framework, the NuGet Package Manager will still be used.
Grunt: JS-based task runners. It is an application that automates general development tasks. The ASP. NET 5.0 project template can use it.

NPM: Node Package Manager, Bower and grunt to use it.

2. Project

3. Directory structure

Wwwroot: The folder used by static files in the project. Includes HTML files, CSS files, image files, JavaScript files, and so on.

Project.json. master project file. It lists the dependencies for the NuGet package.
Package.json. List NPM packages.
Bower.json. List Bower packages.
Gruntfile.js. Configuring the Grunt task.

4.bower

Open Bower.json, add: "Knockoutjs": "^3.2.0"

Note:

Choose which version can loading wait for selection!

"^" means at least the version number specified and matches the major version.

"~" If you specify the major and minor versions of the fix. For example, ' ~ 1.10.2 ' means using at least 1.10.2 or 1.10 of any updated patches.

Click Save file and it will appear:

Then right-click Restore ... ：

You can also see the Output window:

OK, install Knockoutjs.js finished!

5.grunt

Create the Lesses folder in which you create the site.less file with its code:

@bgcolor: red;body {    background-color: @bgcolor;}

Modify Package.json, add: "grunt-contrib-less": "^0.12.0"

Installation:

When the installation succeeds, it appears:

Modify Gruntfile.js

//This is the main entry point for defining grunt tasks and using grunt plugins.//Click here to learn more.http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409Module.exports=function (Grunt) {Grunt.initconfig ({bower: {install: {options: { TargetDir:"Wwwroot/lib", layout:"bycomponent", Cleantargetdir:false                }            }        },        //ADD This JSON object:Less : {development: {options: {paths: ["lesses"], the files: {"Wwwroot/css/site.css":"lesses/site.less" }            },        }    }); //This command registers the default task which would install Bower packages into Wwwroot/libGrunt.registertask ("default", ["Bower:install"]); //The following line loads the grunt plugins. //This line needs to is at the end of this this file.Grunt.loadnpmtasks ("Grunt-bower-task"); Grunt.loadnpmtasks ("grunt-contrib-less");};

View Code

Open Task Explorer:

Right-click less run to compile the less file into a CSS file:

OK, verify that the Web program is running

Note: You can view wwwroot\css\site.css ...

6. Summary

What do you learn from this example? I think, typesetting a bit messy, sorry! In a word, there are many things about NPM, and I have to explore it!

VS2015 Vnext Study notes 02:bower and Grunt