VS2015前端工具：NPM和Web Essentials

1.写作背景

    想在5月份前换个工作环境了，“检讨”一下自己混饭的技术水平和处世的人脉关系，觉得很不给力！为人方面，人各有志也就不纠结了，但本领得尽量提高一下。

    我也不擅长写博客，也发觉以前写过的，要不半途而废，要不质量惨不忍睹，所以以前博文干脆全部删除，试着再回顾一遍也罢！

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修改如下（这里举例下载三个安装包）：   

view source print ?

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，改为：

view source print ?

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文件，其代码为：

view source print ?

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文件，代码为：

view source print ?

1. body {

2. /*背景颜色*/

3. }

4.  

5. a {

6. text-decoration: none;

7. }

      注：此文件有注释，有空格换行的。

      打开package.json，在  'devDependencies'里添加：'grunt-contrib-cssmin': '0.12.2' 

      修改gruntfile.js代码为： 

view source print ?

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文件，其代码为：

view source print ?

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代码为：

view source print ?

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文件，其代码为：

view source print ?

01. /*定义变量*/

02. @body-bg-color: #ff6a00;

03.  

04. body {

05.

06. }

07.  

08. #container {

09. width: 960px;

10. }

        打开package.json，在  'devDependencies'里添加：'grunt-contrib-less': '1.0.0'

         修改gruntfile.js代码为：

view source print ?

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代码为：

       

view source print ?

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颜色值变深浅

19.小结

     这篇文章有些臭长了，还有一些举一反三的用法没有介绍。不过已经掌握文中所述，基本上够用。比如使用npm工具来合并css或js没有介绍到，还有测试css,js,html代码也没有提到，再比如压缩编码图片也没有介绍到。再有Web Essentials好多使用技巧也没说到，其实它也可以干编译，压缩和合并等功能。

     那么说NPM这样安装和配置起来，是不是很晕？ 其实，我预计VS2015正式版发布后，可能不需要这么繁琐了。总之，此文对你不使用VS开发环境，使用NPM也是很有帮助的。

转载于:https://www.cnblogs.com/simadi/p/6934443.html