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

{
"name": "bower",
"license": "Apache-2.0",
"private": true,
"dependencies": {
"jquery": "2.1.3",
"jquery-validation": "1.13.1",
"jquery-validation-unobtrusive": "3.2.2"
},
"exportsOverride": {
"jquery": {
"": "dist/*.*"
},
"jquery-validation": {
"": "dist/jquery.validate.{js,min.js}"
},
"jquery-validation-unobtrusive": {
"": "jquery.validate.unobtrusive.{js,min.js}"
}
}
}

注:安装时exportsOverride配置的复制文件路径要和bower_components下载过的安装包里要复制文件路径一致!

配置dependencies下载的安装包版本,如果不知道确切的版本,就等loading之后选择版本!

上面配置完毕,保存bower.json文件,就开始下载了。完成后目录:

10.安装安装包

这里说静态文件安装,指的是复制到(包含到)项目中。前面我们已经下载过三个安装包了,可是没有在wwwroot(这个是web项目部署时根目录)文件下出现!

打开package.json,改为:

{
"name": "package",
"version": "1.0.0",
"private": true,
"devDependencies": {
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0"
}
}

确定之后,目录出现:

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

/*定义grunt任务和使用grunt插件*/

module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/Libraries",
layout: "byComponent",
cleanTargetDir: false
}
}
},
}); grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
};

右键gruntfile.js文件:

此时出现:

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

OK,我们就完成了复制的过程。(注:后面会介绍自动完成这个过程配置及设置)

11.压缩css

在项目根目录下,创建Styles文件夹,并在其填加test.css文件,代码为:

body {
background-color: #ffd800;/*背景颜色*/
} a {
text-decoration: none;
}

注:此文件有注释,有空格换行的。

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

修改gruntfile.js代码为:

/*定义grunt任务和使用grunt插件*/

module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/Libraries",
layout: "byComponent",
cleanTargetDir: false
}
}
},
/*压缩css*/
cssmin: {
target: {
options: {
sourceMap: true,
},
files: {
/*输出文件路径:原始文件路径*/
"wwwroot/Styles/test.min.css": "Styles/test.css"
}
}
}, }); grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-cssmin"); /*压缩css*/
};

再打开Task Runner Explorer:

执行Run之后,目录出现:

查看test.min.css代码:

OK!去掉换行,空格,注释了!

12.压缩js

在项目根目录下,创建Scripts文件夹,并其添加test.js文件,其代码为:

/*测试*/
function Hello() {
alert("Hello");
} function World() {
alert("World");
}

注释:同样有空格,换行,注释!

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

修改gruntfile.js代码为:

/*定义grunt任务和使用grunt插件*/

module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/Libraries",
layout: "byComponent",
cleanTargetDir: false
}
}
},
/*压缩css*/
cssmin: {
target: {
options: {
sourceMap: true,
},
files: {
/*输出文件路径:原始文件路径*/
"wwwroot/Styles/test.min.css": "Styles/test.css"
}
}
},
/*压缩js*/
uglify: {
target: {
options: {
sourceMap: true,
},
files: {
"wwwroot/Scripts/test.min.js": "Scripts/test.js"
}
}
}, }); grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-cssmin"); /*压缩css*/
grunt.loadNpmTasks("grunt-contrib-uglify"); /*压缩js*/
};

同样执行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代码为:

/*定义grunt任务和使用grunt插件*/

module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/Libraries",
layout: "byComponent",
cleanTargetDir: false
}
}
},
/*压缩css*/
cssmin: {
target: {
options: {
sourceMap: true,
},
files: {
/*输出文件路径:原始文件路径*/
"wwwroot/Styles/test.min.css": "Styles/test.css"
}
}
},
/*压缩js*/
uglify: {
target: {
options: {
sourceMap: true,
},
files: {
"wwwroot/Scripts/test.min.js": "Scripts/test.js"
}
}
},
/*编译less*/
less: {
//开发版(无压缩)
development: {
options: {
sourceMap: true
},
files: {
"wwwroot/Styles/site.css": "Lesses/site.less"
}
},
//生产版(压缩)
production: {
options: {
compress: true
},
files: {
"wwwroot/Styles/site.min.css": "Lesses/site.less"
}
}
}, }); grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-cssmin"); /*压缩css*/
grunt.loadNpmTasks("grunt-contrib-uglify"); /*压缩js*/
grunt.loadNpmTasks("grunt-contrib-less"); /*编译less*/
};

执行Run后,编译后分别输出一个压缩版,一个未压缩版css文件,目录:

14.任务监视

问题来了: 前面介绍任务需要每次Run,是不是很傻蛋,能不能修改原始文件保存后,自动执行任务?

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

修改gruntfile.js代码为:

/*定义grunt任务和使用grunt插件*/

module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/Libraries",
layout: "byComponent",
cleanTargetDir: false
}
}
},
/*压缩css*/
cssmin: {
target: {
options: {
sourceMap: true,
},
files: {
/*输出文件路径:原始文件路径*/
"wwwroot/Styles/test.min.css": "Styles/test.css"
}
}
},
/*压缩js*/
uglify: {
target: {
options: {
sourceMap: true,
},
files: {
"wwwroot/Scripts/test.min.js": "Scripts/test.js"
}
}
},
/*编译less*/
less: {
//开发版(无压缩)
development: {
options: {
sourceMap: true
},
files: {
"wwwroot/Styles/site.css": "Lesses/site.less"
}
},
//生产版(压缩)
production: {
options: {
compress: true
},
files: {
"wwwroot/Styles/site.min.css": "Lesses/site.less"
}
}
},
/*任务监视*/
watch: {
less: {
files: ["Lesses/*.less"],
tasks: ["less:development"]/*举例监视编译less开发版,并未监视生产压缩版*/
}
}
}); grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-cssmin"); /*压缩css*/
grunt.loadNpmTasks("grunt-contrib-uglify"); /*压缩js*/
grunt.loadNpmTasks("grunt-contrib-less"); /*编译less*/
grunt.loadNpmTasks("grunt-contrib-watch");/*任务监视*/
};

把监视开启(执行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. 阿里2015回顾面试招收学历(获得成功offer)

    1. 引言 继上次"百度2015校园招聘面试题回顾录(成功拿到offer)"文章过后,大家都希望除了题目之外.最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有參考价值 ...

  2. 【iOS】UIViewController生命周期

    UIViewController有2周期: 在UIViewController中,View存在两个循环:载入循环和卸载循环. 载入循环 1>程序请求controller的view. 2>假 ...

  3. VS2010或2012中,如何设置代码格式化?

    ctrl + E,D菜单在 编辑-->高级 里面 第一个菜单项

  4. Android Tween Animation

    View Animation, 它显示在view向上Tween Animation Tween动画.本质上没有变化View对象本身.只要改变它绘制 实施方式有两种.一个xml定义,直接在代码中的定义 ...

  5. 【嵌入式开发】写入开发板Linux系统-模型S3C6410

    笔者 : 万境绝尘 转载请著名出处 最终拿到板子了, 嵌入式开发正式开启. 板子型号 : 三星 S3C6410 基于ARM11, 指令集基于arm6指令集; 为毛不是 Cortext A9的板子; 烧 ...

  6. 左右sqlplus一些方法用于汇总

    SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...

  7. StackExchange.Redis 使用 - 事件(五)

    ConnectionMultiplexer 可以注册如下事件 ConfigurationChanged - 配置更改时 ConfigurationChangedBroadcast - 通过发布订阅更新 ...

  8. POJ 2208 已知边四面体六个长度,计算体积

    Pyramids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2718   Accepted: 886   Special ...

  9. [Network]Transport Layer

    1 Principles behind Transport Layer Services 1.1 Multiplexing/Demultiplexing Multiplexing at sender ...

  10. js调用跨域

    web aapi 初体验 解决js调用跨域问题   跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同 ...