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修改如下(这里举例下载三个安装包):

  1. {
  2. "name": "bower",
  3. "license": "Apache-2.0",
  4. "private": true,
  5. "dependencies": {
  6. "jquery": "2.1.3",
  7. "jquery-validation": "1.13.1",
  8. "jquery-validation-unobtrusive": "3.2.2"
  9. },
  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,改为:

  1. {
  2. "name": "package",
  3. "version": "1.0.0",
  4. "private": true,
  5. "devDependencies": {
  6. "grunt": "0.4.5",
  7. "grunt-bower-task": "0.4.0"
  8. }
  9. }

确定之后,目录出现:

再打开gruntfile.js文件,其代码为:

  1. /*定义grunt任务和使用grunt插件*/
  2.  
  3. module.exports = function (grunt) {
  4. grunt.initConfig({
  5. bower: {
  6. install: {
  7. options: {
  8. targetDir: "wwwroot/Libraries",
  9. 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代码为:

  1. /*定义grunt任务和使用grunt插件*/
  2.  
  3. module.exports = function (grunt) {
  4. grunt.initConfig({
  5. bower: {
  6. install: {
  7. options: {
  8. targetDir: "wwwroot/Libraries",
  9. 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代码为:

  1. /*定义grunt任务和使用grunt插件*/
  2.  
  3. module.exports = function (grunt) {
  4. grunt.initConfig({
  5. bower: {
  6. install: {
  7. options: {
  8. targetDir: "wwwroot/Libraries",
  9. 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文件,其代码为:

1
2
3
4
5
6
7
8
9
10
/*定义变量*/
@body-bg-color: #ff6a00;
 
body {
    
}
 
#container {
    width: 960px;
}

打开package.json,在  "devDependencies"里添加:"grunt-contrib-less": "1.0.0"

修改gruntfile.js代码为:

  1. /*定义grunt任务和使用grunt插件*/
  2.  
  3. module.exports = function (grunt) {
  4. grunt.initConfig({
  5. bower: {
  6. install: {
  7. options: {
  8. targetDir: "wwwroot/Libraries",
  9. 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代码为:

  1. /*定义grunt任务和使用grunt插件*/
  2.  
  3. module.exports = function (grunt) {
  4. grunt.initConfig({
  5. bower: {
  6. install: {
  7. options: {
  8. targetDir: "wwwroot/Libraries",
  9. 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)窗口。

我们修改Lesses\site.less文件里代码,并保存此文件,这时wwwroot\Styles\site.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也是很有帮助的。

 
分类: DotNet 2015

VS2015前端工具:NPM和Web Essentials的更多相关文章

  1. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解

    原文:最锋利的Visual Studio Web开发工具扩展:Web Essentials详解 Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从E ...

  2. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解(转)

    Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境 ...

  3. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解【转】

    Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境 ...

  4. 工具-VS2015前端开发工具简介

    每个涉及的工具库都给出了入门介绍.基本概念,以及在VS和ASP.NET中的用法.这个白皮书完全就是一个非常难得的前端开发入门手册. 具体涉及到的工具库有: 流行的JS任务执行器:Grunt和Gulp. ...

  5. 10款Web前端工具

    10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工 ...

  6. 让人一用钟情的VS插件系列之一——Web Essentials(Web开发必备利器)

    返回VS插件总目录 本篇目录 初识Web Essentials 看国外大牛如何评价Web Essentials Web Essentials下载与安装 Web Essentials涉及到了哪些内容 初 ...

  7. 前端工具之WebPack解密--使用

    接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个 ...

  8. 现代前端技术解析:Web前端技术基础

    ​ 最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...

  9. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

随机推荐

  1. 大约linux的几个问题,你能回答几个?--回复14-20称号

    14.select和poll差异?Poll和epoll的差别? (1)select和poll的差别:(參考:http://blog.csdn.net/mituan2008/article/detail ...

  2. Socket编程实践(4) --更复杂的过程server

    1.Socket地址复用 int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); in ...

  3. Akka.net开发第一个分布式应用

    Akka.net开发第一个分布式应用 系列主题:基于消息的软件架构模型演变 既然这个系列的主题是”基于消息的架构模型演变“,少不了说说Actor模型.Akka.net是一个基于Actor模型的分布式框 ...

  4. Quartz(GUI)图形界面程序----Quartz Web

    下载.设置和运行Quartz(GUI)图形界面程序----Quartz Web 一.获取Quartz Web程序(Quartz GUI).早期的 Quartz 框架开发者意识到一个 GUI 对于某类用 ...

  5. 播放视频的框架Vitamio的使用问题

    曾经用过这个牛逼的框架,后来又任意搞了下.发现播放不了视频了.搞了老半天才搞好,今天又随便整了下,发现又不行了.我勒个插! 如今最终又搞出来了,发现我总是把步骤搞错或少写了些东西 总的步骤: 一:导入 ...

  6. 使用block实现两个页面之间的传统价值观

    第二个view声明一个block属性: @property (nonatomic, copy) void(^doTransferMsg)(NSString *_msg); 然后传值方法里检查block ...

  7. WPF学习(9)样式和行为

    在asp.net世界中,我们的美工人员会为我们准备好静态页面,它注意包括三个部分:html.css和js.而在WPF世界里,也同样有着类似这三个部分的静态页面:Xaml.Style和Behaviors ...

  8. MKMapView移动事件地图

    MKMapView移动事件地图 by 吴雪莹 -(void)mapView:(MKMapView *)mapView regionWillChangeAnimated:(BOOL)animated { ...

  9. JavaScript的隐式转换

    原文:JavaScript的隐式转换 JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object.object是引用类型,其它 ...

  10. 远程访问mysql(转)

    GRANT ALL PRIVILEGES ON *.* TO '<username>'@'<remote addr or %(for all ip addr)>'IDENTIF ...