博客 (5)


LigerShark.WebOptimizer.CoreBuildBundlerMinifier
特点

在运行时捆绑和缩小 CSS 和 JavaScript 文件

具有完整的服务器端和客户端缓存,以确保高性能

可禁用缩小

支持使用通配模式

标记帮助程序与缓存破坏

支持内联

支持 SCSS

将 CSS、JavaScript 或 HTML 文件捆绑到单个输出文件中

保存源文件会自动触发重新捆绑

支持通配模式

支持 CI 方案的 MSBuild 支持

缩小单个或捆绑的 CSS、JavaScript 和 HTML 文件

每种语言的缩小选项是可定制的

打开生成的文件时显示水印

任务运行程序资源管理器集成

命令行支持

快捷更新解决方案中所有捆绑包

禁止生成输出文件

转换为 Gulp

注入(Program.cs)

services.AddWebOptimizer();

app.UseWebOptimizer();


指定捆绑的项目在运行时自动缩小 css 和 js,也可以在 AddWebOptimizer 中自定义。默认情况下,生成的文件不会保存到磁盘,而是保存在缓存中。手动编辑 bundleconfig.json 文件来指定需要合并和缩小的文件
功能配置
{
  "webOptimizer": {
    // 确定是否应设置 HTTP 标头以及是否应支持条件 GET (304) 请求。在开发模式下禁用此功能可能会有所帮助。cache-control
    "enableCaching": true,
    // 确定是否用于缓存。在开发模式下禁用可能会有所帮助。IMemoryCache
    "enableMemoryCache": true,
    // 确定管道资产是否缓存到磁盘。这可以通过从磁盘加载 pipline 资产而不是重新执行管道来加快应用程序重新启动的速度。在开发模式下禁用可能会有所帮助。
    "enableDiskCache": true,
    // 设置资产将存储的目录 ifistrue。必须为读/写。enableDiskCache
    "cacheDirectory": "/var/temp/weboptimizercache",
    // 确定元素是否应指向捆绑路径或应为每个源文件创建引用。这在开发模式下禁用很有帮助。
    "enableTagHelperBundling": true,
    // 是一个绝对 URL,如果存在,它会自动为页面上的任何脚本、样式表或媒体文件添加前缀。注册标记帮助程序后,标记帮助程序会自动添加前缀。在此处查看如何注册标记帮助程序。
    "cdnUrl": "https://my-cdn.com/",
    // 确定捆绑包的源文件中没有内容时的行为,默认情况下,请求捆绑包时将引发 404 异常,设置为 true 以获取包含空内容的捆绑包。
    "allowEmptyBundle": false
  }
}


在 bundleconfig.json 捆绑时设置

[
  {
    "outputFileName": "output/bundle.css",
    "inputFiles": [
      "css/lib/**/*.css", // globbing patterns are supported
      "css/input/site.css"
    ],
    "minify": {
        "enabled": true,
        "commentMode": "all"
    }
  },
  {
    "outputFileName": "output/all.js",
    "inputFiles": [
      "js/*.js",
      "!js/ignore.js" // start with a ! to exclude files
    ]
  },
  {
    "outputFileName": "output/app.js",
    "inputFiles": [
      "input/main.js",
      "input/core/*.js" // all .js files in input/core/
    ]
  }
]


热重载(在开发模式中保存文件自动更新浏览器效果)
VS 安装扩展,方法:菜单 - 扩展 - 管理扩展 - 联机 搜索“Bundler & Minifier
其它资料
ASP.NET 官方文档


xoyozo 2 年前
1,532

完整操作步骤如下:

  1. 安装 NuGet 包:Microsoft.AspNet.Web.Optimization

  2. 打开 Views 目录(如果是应用于区域,则为区域的 Views 目录)中的 web.config,在 <namespaces /> 节点中添加

    <add namespace="System.Web.Optimization" />
  3. App_Start 目录中创建类文件 BundleConfig.cs,更改其命名空间为应用程序的默认命名空间(即移除 .App_Start),创建方法:

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/虚拟路径(不能有点)").Include("~/CSS文件路径"));
        bundles.Add(new ScriptBundle("~/虚拟路径(不能有点)").Include("~/JS文件路径"));
    }

    虚拟路径应避免与页面访问路径相同。Include 可包含多个文件,效果是合并输出,注意引用的顺序。

  4. 打开 Global.asax,在 Application_Start() 事件中添加代码

    BundleTable.EnableOptimizations = true; // 该设置使在开发模式中实现压缩代码,不设置则仅在发布后压缩代码
    BundleConfig.RegisterBundles(BundleTable.Bundles);
  5. 视图页面中引用样式表或脚本

    @Styles.Render("~/CSS虚拟路径")
    @Scripts.Render("~/JS虚拟路径")

    使用 Render 的好处是,ASP.NET 会自动给引用地址加上参数,可在更改脚本或样式表内容后更改这些参数使浏览器缓存立即失效。

如果你的项目中已经安装并使用 Bundle,那么只需要参考第 4 步,将 BundleTableEnableOptimixations 设为 true

以下是一些常见异常的解决方法:


The name 'Styles' does not exist in the current context

The name 'Scripts' does not exist in the current context

解决:参步骤 2。


引用的样式表或脚本不存在(报 404 错误)

解决:步骤 3 中的虚拟路径不规范。

xoyozo 5 年前
4,000

这是一个数据可视化项目,基于D3.js。能够将历史数据排名转化为动态柱状图图表。

先来看看效果:

https://xoyozo.net/Demo/BarGraph

作者 Jannchie 见齐还提供了官方视频教程:

https://www.bilibili.com/video/av28087807

不过由于开源项目的不断更新,该教程的部分内容已失效,本文针对 2018-12-25 版本总结了一些常用的配置说明,仅供参考。


从 GitHub 下载源代码,在 src 目录中可以看到 4 个文件:

bargraph.html --> 运行示例页面

config.js --> 配置文件

stylesheet.css --> 样式表

visual.js --> 核心文件


作者并没有将代码封装为插件的方式,所以我们是通过修改 config.js 配置文件的方式应用到自己的项目中的。

visual.js 虽然是核心文件,但作者将部分示例中的代码也包含其中,但并不影响我们直接在自己的项目中引用。

以下是 config.js 中的主要属性:

属性说明参考值
encoding数据源(csv、json)等的文件编码GBK / UTF-8 等
max_number每个时间节点最多显示的条目数10
showMessage控制是否显示顶部附加信息文字true / false
auto_sort时间自动排序(详细含义、作用及限制见代码中注释)true / false
timeFormat时间格式,显示于图表右下角的时间%Y、%Y-%M-%D 等
reverse是否倒序true / false
divide_by类型根据什么字段区分?如果是 name,则关闭类型显示
divide_color_by

颜色根据什么字段区分?

须要注意的是,如果配置成 name,则各条颜色不同(因为 name 值各异),如果配置成 type 等,那么相同 type 值的条颜色相同。

字段名
color指定部分或所有条的颜色,该项与 divide_color_by 设置有关。

以 divide_color_by = 'name' 为例,"中国"是其中的一项 name 值,那么该项将显示 #D62728 色:

color: {

      '中国': '#D62728'

}

changeable_color若 true 则颜色的深浅将根据数据的增长率实时改变
itemLabel
左边文字
typeLabel右边文字
item_x


interval_time
时间点间隔时间2
text_y


text_x


offset


display_barInfo如果希望不显示,则可以设置较大的值,单位像素
use_counter

step

format格式化数值
left_margin

right_margin

top_margin

bottom_margin

dateLabel_x

dateLabel_y

allow_up

enter_from_0

big_value

use_semilogarithmic_coordinate

long

wait数据加载完成后开始播放前的等待时间0
update_rate


xoyozo 5 年前
8,636

IIS 中如果直接“停止”网站,那么打开页面时会显示不友好的“该页无法显示”等界面,如果特殊原因要求不能打开所有页面,但必须有一个友好提示“网站维护中”的页面,那么最土的办法是把网站的所有文件移出来,仅上传一个提示正在维护的网页,并保证是默认首页。其实有一个更加简单有效的解决方案:

在 IIS 中单击该网站,打开“URL 重写”,右侧“添加规则”,选择“空白规则”。名称可以是“网站维护中”,请求的 URL 选择“与模式不匹配”,使用“完全匹配”,模式填入我们的提示页面地址,如“maintaining.html”,操作类型“重定向”,重定向 URL 填入刚才那个页面地址,附加查询字符串不需要,类型选择“临时(307)”,点击右侧“应用”。

好了,该网站的任何请求都会引导到 maintaining.html,而不仅仅是首页的跳转。而且不需要移动网站文件,也保障了不会被人利用网站漏洞攻击篡改网站内容。

补充一点,如果你的 maintaining.html 中调用了网站中的图片、脚本、样式表等,那么需要把模式匹配的方式改为“正则表达式”,并填入正确的正则表达式,以保证这些文件都能被正常请求。

xoyozo 8 年前
4,090

方法:
    write,向HTML动态写入内容
    writeln,多加一个换行
    open,与window.open类似,不建议用
    close,当向新打开的文档对象中写完所有的内容后,一定要调用该方法关闭文档流
    clear,用于清除文档中的所有内容,建议用document.write("");document.close();这两条语句来实现同样的功能。
    getElementById,返回id的对象
    getElementByName,返回name的对象组(注意是数组)
    getElementByTagName,返回标签名的对象组
    createElement,产生一个代表某个HTML元素的对象,随后再其它方法将这个对象插入到文档中。
    createStyleSheet,为当前HTML产生一个样式表或增加一条样式规则。
属性:
    document.cookie

xoyozo 16 年前
3,460