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.
/*定义grunt任务和使用grunt插件*/
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.
/*定义grunt任务和使用grunt插件*/
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.
/*压缩css*/
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'
);
/*压缩css*/
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.
/*定义grunt任务和使用grunt插件*/
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.
/*压缩css*/
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.
/*压缩js*/
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'
);
/*压缩css*/
43.
grunt.loadNpmTasks(
'grunt-contrib-uglify'
);
/*压缩js*/
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.
/*定义grunt任务和使用grunt插件*/
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.
/*压缩css*/
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.
/*压缩js*/
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.
/*编译less*/
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'
);
/*压缩css*/
64.
grunt.loadNpmTasks(
'grunt-contrib-uglify'
);
/*压缩js*/
65.
grunt.loadNpmTasks(
'grunt-contrib-less'
);
/*编译less*/
66.
};
执行Run后,编译后分别输出一个压缩版,一个未压缩版css文件,目录:
14.任务监视
问题来了: 前面介绍任务需要每次Run,是不是很傻蛋,能不能修改原始文件保存后,自动执行任务?
打开package.json,在 'devDependencies'里添加:'grunt-contrib-watch': '0.6.1'
修改gruntfile.js代码为:
01.
/*定义grunt任务和使用grunt插件*/
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.
/*压缩css*/
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.
/*压缩js*/
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.
/*编译less*/
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'
);
/*压缩css*/
70.
grunt.loadNpmTasks(
'grunt-contrib-uglify'
);
/*压缩js*/
71.
grunt.loadNpmTasks(
'grunt-contrib-less'
);
/*编译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