VS2015前端工具:NPM和Web Essentials

时间:2022-04-09 13:46:42

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,其目录:

    VS2015前端工具:NPM和Web Essentials

8.添加grunt及bower

    右键项目“Add':

    VS2015前端工具:NPM和Web Essentials

    此时目录会出现:

    VS2015前端工具:NPM和Web Essentials

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文件,就开始下载了。完成后目录:

    VS2015前端工具:NPM和Web Essentials

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. }

     确定之后,目录出现:

     VS2015前端工具:NPM和Web Essentials  

     再打开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文件:

      VS2015前端工具:NPM和Web Essentials

      此时出现:

      VS2015前端工具:NPM和Web Essentials

      右键bower选择Run,没有错误信息的话,目录会有:

      VS2015前端工具:NPM和Web Essentials

      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:

      VS2015前端工具:NPM和Web Essentials

      执行Run之后,目录出现:

      VS2015前端工具:NPM和Web Essentials

      查看test.min.css代码:

      VS2015前端工具:NPM和Web Essentials

      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后,代码会压缩成:

       VS2015前端工具:NPM和Web Essentials

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文件,目录:

        VS2015前端工具:NPM和Web Essentials

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):

    VS2015前端工具:NPM和Web Essentials

    此时不要退出(关闭)watch(running)窗口。

    我们修改Lessessite.less文件里代码,并保存此文件,这时wwwrootStylessite.css也会随之改变,但site.min.css并未变化。

15.绑定任务

    在监视任务,我们演示了需要watch(running)窗口不要关闭,同样是很笨的,能不能在打开项目时,让它自动执行Run!这就绑定任务即可。

    VS2015前端工具:NPM和Web Essentials

    设置后:

    VS2015前端工具:NPM和Web Essentials

    OK!这样vs打开项目时,自动执行此监视任务!(注:绑定项还有别的哦)

16.注册任务

    在gruntfile.js添加:grunt.registerTask('production', ['less:production']);

    这样在Alias项里:

    VS2015前端工具:NPM和Web Essentials

17.Web Essentials 安装

     打开vs-》Tools-》Extensions and Updates:

     VS2015前端工具:NPM和Web Essentials

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