NET Core 静态文件及JS包管理器(npm, Bower)的使用
NET Core 静态文件及JS包管理器(npm, Bower)的使用
在 ASP.NET Core 中添加静态文件
虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的。在ASP.NET Core中要启用静态文件,需要Microsoft.AspNetCore.StaticFiles
组件。可以通过Nuget添加,或者在project.json
配置文件中添加:
然后在Startup
类中的Configre
方法里调用UseStaticFiles
扩展方法来实现:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole();
app.UseStaticFiles();//使用静态文件
//省略其他代码
}
虽然现在很多人在开发.NET CORE时使用VS Code,但我还是不值得放弃VS这么强大的工具。
我们使用空的ASP.NET Core模板创建一个项目进行测试:
并添加上面说的Microsoft.AspNetCore.StaticFiles
组件,然后在wwwroot
文件夹中添加文件Hello.html
,内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>StaticDemo</title>
</head>
<body>
<h1>Hello From Static Files.</h1>
</body>
</html>
运行后,浏览器地址栏输入http://localhost:<port>/Hello.html
,<port>
更改为自己的端口号。
官方说可以通过添加hosting.json
配置来更改默认的wwwroot
路径,但我更改后运行并没有效果。若有朋友知道怎么更改,还请告知!
我添加了hosting.json
并添加如下配置后,该文件夹图标会改变,但运行后无法读取到静态文件,还是通过wwwroot
路径读取。
{
"webroot": "statics"
}
使用npm管理JavaScript包
在ASP.NET 5或之前使用JavaScript一般是使用NuGet来管理,在VS2015中添加了其他包管理工具,包括Node Package Manager (npm)
和Bower
。
要使用这些包管理工具,需要先添加配置文件,添加时保留默认名称:
因为安装了Web Essentials扩展,右下角显示了npm的logo。
添加配置文件后,在devDependencies
节点增加需要使用的JS库的名称,在VS中还支持提示和自动完成:
版本号支持^
和~
前缀。
- 若没有前缀,只从服务器检索与提供的版本号一致的版本。
^
前缀,将检索与提供版本号主版本号一致的最新的版本。~
前缀,将检索与提供版本号次版本号一致的最新的版本。
在配置文件添加了所需JS库后,会自动将JS库下载到node_modules
文件夹(在VS项目中可能需要开启显示所有文件才能看到)。
但下载下来的文件其实很多我们都用不到,这时可以使用gulp创建任务,将我们需要的文件转移到web root
文件夹。而node_modules
文件夹就可以在版本控制,以及部署时忽略。
使用gulp压缩和构建JS
gulp是基于node.js构建的,所以我们需要在npm的配置package.json
中添加对其的引用,其中包括几个常用插件。
{
"name": "myproject",
"version": "1.0.0",
"devDependencies": {
"gulp": "3.9.0",
"gulp-concat": "2.6.0",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.4.2"
}
}
然后添加gulp的配置文件gulpfile.js
(请查看前面添加nmp配置文件的图)。创建几个任务:
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify")
var paths = {
webroot: "./wwwroot/"
};
paths.node_modules_libs = [
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
]
paths.lib = paths.webroot + 'lib/*.js';
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.concatJsDest = paths.webroot + "js/site.min.js";
gulp.task('lib', function () { //复制npm包到web root中
gulp.src(paths.node_modules_libs).pipe(gulp.dest(paths.webroot + 'lib'))
});
gulp.task("clean:js", function (cb) { //清理压缩后的js文件
rimraf(paths.concatJsDest, cb);
});
gulp.task("min:js", function () { //将需要的js压缩并合并成一个文件以减少http请求数
gulp.src([paths.js, "!" + paths.minJs, paths.lib], { base: "." }).pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
其中lib
任务将node_modules
中需要的文件复制到webroot
的lib
文件夹,另两个任务分别用于清除文件和压缩文件。
在VS2015中,可以通过“任务运行程序资源管理器”(右键gulp配置文件,或通过视图-其他窗口-任务运行程序资源管理器)进行任务管理,也可以将任务绑定到相应事件以自动运行。
其中清除会在清理项目时运行。
运行后目录结构:
压缩合并后,前端页面只需引用一个site.min.js
就可以了。
gulp就不多说了,这里推荐个中文学习网站:Gulp 中文网。
使用Bower管理JavaScript包
因为npm是node.js的包管理工具,而node.js主要用于构建服务端程序。所以,其实客户端的包管理工具我们有更好的选择:Bower。
使用时可以添加Bower配置文件,或右键项目选择“管理Bower程序包”。Bower在VS中使用方法和Nuget很像。
JS包默认安装到webroot
的lib
文件夹,可以通过.bowerrc
文件更改安装路径。
本文发表于博客园。 转载请注明源链接:http://www.cnblogs.com/hjklin/p/5883855.html。
NET Core 静态文件及JS包管理器(npm, Bower)的使用的更多相关文章
- ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用
在 ASP.NET Core 中添加静态文件 虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的.在ASP.NET Core中要启用静态文件,需要Microsoft.AspNe ...
- Node.js 包管理器 NPM 讲解
包管理器又称软件包管理系统,它是在电脑中自动安装.配制.卸载和升级软件包的工具组合,在各种系统软件和应用软件的安装管理中均有广泛应用.对于我们业务开发也很受益,相同的东西不必重复去造轮子. 每个工具或 ...
- 9.Node.js 包管理器npm
npm 是 Node.js 官方提供的包管理工具, 用于 Node.js包的发布.传播.依赖控制 安装 express ==> 流行的基于Node.js的Web开发框架,可以快速地搭建一个完整 ...
- Node.js包管理器Yarn的入门介绍与安装
FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT. 就在昨天, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm .咱 ...
- Node.js包管理器:
Node.js包管理器: 当我们要把某个包作为工程运行的一部分时,通过本地模式获取,如果要在命令行下使用,则使用全局模式安装 使用全局模式安装的包并不能直接在JavaScript文件中用require ...
- npm --- Node.js包管理器
目录 1. 安装Node.js 2. 运行npm 3. npm介绍 3.1 安装插件 3.2 更新插件 3.3 卸载插件 3.4 查看当前目录中的插件列表 4. 使用cnpm 4.1 安装 npm( ...
- nodejs的包管理器npm和cnpm
http://www.ydcss.com/archives/18 3.npm介绍 3.1.说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装 ...
- 前端开发bower包管理器
Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,他可以很好的帮助你帮你解决js的依赖管理,比如jquery angular bootstrap 等等. 可以很方便的 ...
- 【转】npm包管理器那些事
原文链接:http://www.cnblogs.com/shuoer/p/7782125.html npm包管理器那些事! 今天和朋友针对npm包全局安装和本地项目安装这个梗展开的激烈的讨论,故此做一 ...
随机推荐
- win7不能在同一窗口打开文件夹,解决办法
1.由于IE浏览器的主页被劫持,总是忽然弹出搜狗的主页,有的时候,忽然弹出IE浏览器(主页是搜狗),然后又自行关闭,我X,我的电脑竟然不受我控制,这可得了,这里我又要骂宁美国度了,made,组装机装了 ...
- java_method_readFile读取文件文本txt
/** * @Title: TxtAndCsvUtils.java * @Package cn.com.qmhd.tools * @Description: TODO(读取txt和CSV文档) * @ ...
- 在Windows上安装私有GitHub的开源替代-GitLab
在我之前的一篇博客中介绍过GitLab: 开源免费的git管理工具,今天说一下怎么在windows安装GitLab. BitNami可以很容易的帮助你安装开源应用,和Helicon Zoo类似,我之前 ...
- 【javascript基础知识】javascript中的转义序列和特殊数值常量
javascript的转义序列 \0 NUL字符(\u0000) \b 退格符(\u0008) \t 水平制表符(\u0009) \n 换行符(\u000A) \v 垂直制表符(\u000B) \f ...
- 使用JUnit测试java代码
Junit 单元测试实验报告 一.实验环境 MyEclipse2014.Junit4.10 二.实验目的 学会单元测试,在MyEclipse中进行Junit测试 三.实验步骤 1.写出要测试的类 代 ...
- how tomcat works 读书笔记四 tomcat的默认连接器
事实上在第三章,就已经有了连接器的样子了,只是那仅仅是一个学习工具,在这一章我们会開始分析tomcat4里面的默认连接器. 连接器 Tomcat连接器必须满足下面几个要求 1 实现org.apache ...
- 使用 Acegi 保护 Java 应用程序
第 1 部分: 架构概览和安全过滤器 Acegi Security System 是一种功能强大并易于使用的替代性方案,使您不必再为 Java 企业应用程序编写大量的安全代码.虽然它专门针对使用 Sp ...
- centos6.5 64位 openvpn安装配置
1 查看系统版本 2 cat /etc/redhat-release 3 CentOS release 6.5 (Final) 4 5 查看内核和cpu架构 6 uname -rm 7 2.6.32- ...
- ASP.NET Web API 文件產生器 - 使用 Swagger
转帖:http://kevintsengtw.blogspot.hk/2015/12/aspnet-web-api-swagger.html Swagger 是一套 API 互動文件產生器,使用 HT ...
- oracle 查看用户表数目,表大小,视图数目等
查看当前用户的缺省表空间 SQL>select username,default_tablespace from user_users; 查看当前用户的角色 SQL>select * fr ...