|
2.本章概述
VS2015 CTP6下的NPM（bower及grunt）和Web Essentials基本安装和使用.如果你是web前端开发人员，建议熟练掌握。
3.NPM
a package manager for JavaScript. 它是一个使用Node.js技术的包管理和分发工具，可以方便地找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。
注：官方https://www.npmjs.com
4.Bower
web包配置管理工具，允许您下载（一般从github等托管源码网站）和安装或还原软件包，一般处理是 JavaScript 和 CSS 库等静态文件。
注：对于静态文件安装包，仍可以使用 NuGet 程序包管理器。NPM技术应用非常广泛，VS没有理由不集成它。
5.Grunt
基于Javascript（使用NPM)技术的task runners。task runners是一个应用程序，或者说它是一个任务工具。
6.Web Essentials
它是VS扩展插件，是 编写CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS一款强大web开发辅助工具。
注：官方http://vswebessentials.com
7.创建项目
为了演示说明，我们创建解决方案名为：GiveCaseBlog,项目模板采用ASP.NET
5 Preview Web API名为:GiveCaseBlog.WebApies,其目录：
8.添加grunt及bower
右键项目“Add':
此时目录会出现：
9.下载安装包配置
打开bower.json修改如下（这里举例下载三个安装包）：
01.{
02.'name': 'bower',
03.'license': 'Apache-2.0',
04.'private': true,
05.'dependencies':
{
06.'jquery': '2.1.3',
07.'jquery-validation': '1.13.1',
08.'jquery-validation-unobtrusive': '3.2.2'
09.},
10.'exportsOverride':
{
11.'jquery':
{
12.'': 'dist/*.*'
13.},
14.'jquery-validation':
{
15.'': 'dist/jquery.validate.{js,min.js}'
16.},
17.'jquery-validation-unobtrusive':
{
18.'': 'jquery.validate.unobtrusive.{js,min.js}'
19.}
20.}
21.}
注：安装时exportsOverride配置的复制文件路径要和bower_components下载过的安装包里要复制文件路径一致！
配置dependencies下载的安装包版本，如果不知道确切的版本，就等loading之后选择版本！
上面配置完毕，保存bower.json文件，就开始下载了。完成后目录：
10.安装安装包
这里说静态文件安装，指的是复制到（包含到）项目中。前面我们已经下载过三个安装包了，可是没有在wwwroot（这个是web项目部署时根目录）文件下出现！
打开package.json，改为：
01.{
02.'name': 'package',
03.'version': '1.0.0',
04.'private': true,
05.'devDependencies':
{
06.'grunt': '0.4.5',
07.'grunt-bower-task': '0.4.0'
08.}
09.}
确定之后，目录出现：
再打开gruntfile.js文件，其代码为：
01.
02.
03.module.exports
= function (grunt) {
04.grunt.initConfig({
05.bower:
{
06.install:
{
07.options:
{
08.targetDir: 'wwwroot/Libraries',
09.layout: 'byComponent',
10.cleanTargetDir: false
11.}
12.}
13.},
14.});
15.
16.grunt.registerTask('default',
['bower:install']);
17.grunt.loadNpmTasks('grunt-bower-task');
18.};
右键gruntfile.js文件：
此时出现：
右键bower选择Run，没有错误信息的话，目录会有：
OK，我们就完成了复制的过程。（注：后面会介绍自动完成这个过程配置及设置）
11.压缩css
在项目根目录下，创建Styles文件夹，并在其填加test.css文件，代码为：
1.body
{
2.background-color:
#ffd800;
3.}
4.
5.a
{
6.text-decoration:
none;
7.}
注：此文件有注释，有空格换行的。
打开package.json，在 'devDependencies'里添加：'grunt-contrib-cssmin': '0.12.2'
修改gruntfile.js代码为：
01.
02.
03.module.exports
= function (grunt) {
04.grunt.initConfig({
05.bower:
{
06.install:
{
07.options:
{
08.targetDir: 'wwwroot/Libraries',
09.layout: 'byComponent',
10.cleanTargetDir: false
11.}
12.}
13.},
14.
15.cssmin:
{
16.target:
{
17.options:
{
18.sourceMap: true,
19.},
20.files:
{
21.
22.'wwwroot/Styles/test.min.css': 'Styles/test.css'
23.}
24.}
25.},
26.
27.});
28.
29.grunt.registerTask('default',
['bower:install']);
30.grunt.loadNpmTasks('grunt-bower-task');
31.grunt.loadNpmTasks('grunt-contrib-cssmin');
32.};
再打开Task Runner Explorer:
执行Run之后，目录出现：
查看test.min.css代码：
OK！去掉换行，空格，注释了！
12.压缩js
在项目根目录下，创建Scripts文件夹，并其添加test.js文件，其代码为：
1.
2.function
Hello() {
3.alert('Hello');
4.}
5.
6.function
World() {
7.alert('World');
8.}
注释：同样有空格，换行，注释！
打开package.json，在 'devDependencies'里添加：'grunt-contrib-uglify': '0.8.0'
修改gruntfile.js代码为：
01.
02.
03.module.exports
= function (grunt) {
04.grunt.initConfig({
05.bower:
{
06.install:
{
07.options:
{
08.targetDir: 'wwwroot/Libraries',
09.layout: 'byComponent',
10.cleanTargetDir: false
11.}
12.}
13.},
14.
15.cssmin:
{
16.target:
{
17.options:
{
18.sourceMap: true,
19.},
20.files:
{
21.
22.'wwwroot/Styles/test.min.css': 'Styles/test.css'
23.}
24.}
25.},
26.
27.uglify:
{
28.target:
{
29.options:
{
30.sourceMap: true,
31.},
32.files:
{
33.'wwwroot/Scripts/test.min.js': 'Scripts/test.js'
34.}
35.}
36.},
37.
38.});
39.
40.grunt.registerTask('default',
['bower:install']);
41.grunt.loadNpmTasks('grunt-bower-task');
42.grunt.loadNpmTasks('grunt-contrib-cssmin');
43.grunt.loadNpmTasks('grunt-contrib-uglify');
44.};
同样执行Run后，代码会压缩成：
13.编译less
在项目根目录下，创建Lesses文件夹，并其添加site.less文件，其代码为：
01.
02.@body-bg-color:
#ff6a00;
03.
04.body
{
05.background-color:
@body-bg-color;
06.}
07.
08.#container
{
09.width:
960px;
10.}
打开package.json，在 'devDependencies'里添加：'grunt-contrib-less': '1.0.0'
修改gruntfile.js代码为：
01.
02.
03.module.exports
= function (grunt) {
04.grunt.initConfig({
05.bower:
{
06.install:
{
07.options:
{
08.targetDir: 'wwwroot/Libraries',
09.layout: 'byComponent',
10.cleanTargetDir: false
11.}
12.}
13.},
14.
15.cssmin:
{
16.target:
{
17.options:
{
18.sourceMap: true,
19.},
20.files:
{
21.
22.'wwwroot/Styles/test.min.css': 'Styles/test.css'
23.}
24.}
25.},
26.
27.uglify:
{
28.target:
{
29.options:
{
30.sourceMap: true,
31.},
32.files:
{
33.'wwwroot/Scripts/test.min.js': 'Scripts/test.js'
34.}
35.}
36.},
37.
38.less:
{
39.
40.development:
{
41.options:
{
42.sourceMap: true
43.},
44.files:
{
45.'wwwroot/Styles/site.css': 'Lesses/site.less'
46.}
47.},
48.
49.production:
{
50.options:
{
51.compress: true
52.},
53.files:
{
54.'wwwroot/Styles/site.min.css': 'Lesses/site.less'
55.}
56.}
57.},
58.
59.});
60.
61.grunt.registerTask('default',
['bower:install']);
62.grunt.loadNpmTasks('grunt-bower-task');
63.grunt.loadNpmTasks('grunt-contrib-cssmin');
64.grunt.loadNpmTasks('grunt-contrib-uglify');
65.grunt.loadNpmTasks('grunt-contrib-less');
66.};
执行Run后，编译后分别输出一个压缩版，一个未压缩版css文件，目录：
14.任务监视
问题来了： 前面介绍任务需要每次Run，是不是很傻蛋，能不能修改原始文件保存后，自动执行任务？
打开package.json，在 'devDependencies'里添加：'grunt-contrib-watch': '0.6.1'
修改gruntfile.js代码为：
01.
02.
03.module.exports
= function (grunt) {
04.grunt.initConfig({
05.bower:
{
06.install:
{
07.options:
{
08.targetDir: 'wwwroot/Libraries',
09.layout: 'byComponent',
10.cleanTargetDir: false
11.}
12.}
13.},
14.
15.cssmin:
{
16.target:
{
17.options:
{
18.sourceMap: true,
19.},
20.files:
{
21.
22.'wwwroot/Styles/test.min.css': 'Styles/test.css'
23.}
24.}
25.},
26.
27.uglify:
{
28.target:
{
29.options:
{
30.sourceMap: true,
31.},
32.files:
{
33.'wwwroot/Scripts/test.min.js': 'Scripts/test.js'
34.}
35.}
36.},
37.
38.less:
{
39.
40.development:
{
41.options:
{
42.sourceMap: true
43.},
44.files:
{
45.'wwwroot/Styles/site.css': 'Lesses/site.less'
46.}
47.},
48.
49.production:
{
50.options:
{
51.compress: true
52.},
53.files:
{
54.'wwwroot/Styles/site.min.css': 'Lesses/site.less'
55.}
56.}
57.},
58.
59.watch:
{
60.less:
{
61.files:
['Lesses/*.less'],
62.tasks:
['less:development']/*举例监视编译less开发版，并未监视生产压缩版*/
63.}
64.}
65.});
66.
67.grunt.registerTask('default',
['bower:install']);
68.grunt.loadNpmTasks('grunt-bower-task');
69.grunt.loadNpmTasks('grunt-contrib-cssmin');
70.grunt.loadNpmTasks('grunt-contrib-uglify');
71.grunt.loadNpmTasks('grunt-contrib-less');
72.grunt.loadNpmTasks('grunt-contrib-watch');
73.};
把监视开启（执行Run）：
此时不要退出（关闭）watch(running)窗口。
我们修改Lessessite.less文件里代码，并保存此文件，这时wwwrootStylessite.css也会随之改变，但site.min.css并未变化。
15.绑定任务
在监视任务，我们演示了需要watch(running)窗口不要关闭，同样是很笨的，能不能在打开项目时，让它自动执行Run!这就绑定任务即可。
设置后：
OK!这样vs打开项目时，自动执行此监视任务！（注：绑定项还有别的哦）
16.注册任务
在gruntfile.js添加：grunt.registerTask('production', ['less:production']);
这样在Alias项里：
17.Web Essentials 安装
打开vs-》Tools-》Extensions and Updates:
18.Web Essentials使用
下面示例按下Tab键生成代码片段：
1: 示例div#container1
<div id='container1'></div>
2: 示例div.container2
<div class='container2'></div>
3: 示例div>ul
<div>
<ul></ul>
</div>
4: 示例div#head>ul.menu
<div id='head'>
<ul class='menu'></ul>
</div>
5: 示例 ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
6: 示例div#head>nav.menu>ul>li*3
<div id='head'>
<nav class='menu'>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
7: 示例div#head>nav.menu>ul>li#item$*3
<div id='head'>
<nav class='menu'>
<ul>
<li id='item1'></li>
<li id='item2'></li>
<li id='item3'></li>
</ul>
</nav>
</div>
8: 示例div#head>nav.menu>ul>li#item$$*3
<div id='head'>
<nav class='menu'>
<ul>
<li id='item01'></li>
<li id='item02'></li>
<li id='item03'></li>
</ul>
</nav>
</div>
9: 示例div.container>(header>nav)+(div.row>div.context*3)
<div class='container'>
<header>
<nav></nav>
</header>
<div class='row'>
<div class='context'></div>
<div class='context'></div>
<div class='context'></div>
</div>
</div>
选择行快捷键：
把光标所在行选中使用 Alt+1键，再一次按Alt+1将选择兄弟元素所有行，再一次按Alt+1将选择包含换行空行兄弟元素行 ；
按下Shift+Alt+W将选择的元素外加个新的元素。
其它快捷键：
ctrl+shift+上下键可以让css颜色值变深浅
转载自：http://www.it165.net/pro/html/201503/35652.html | 
转播
