Ω
返回上页
更新日期2019年12月30日

概述

2018年时想做一个使用C# razor语法写html页面工具.当时研究了asp.net的razor后没找到生成静态页面的办法,后来使用了三方的RazorEngine开源库,得以实现.

原理是使用RazorEngine提供的方法,将Razor页面编译成静态html.为了方便使用,做成了vs插件.支持在vs2017上使用

插件使用

在vs2017安装这个插件,安装方法是找到插件项目的编译目录,运行WebFilePublishVSIX.vsix这个文件.按提示安装,过程中会要求关闭vs.

打开或者新建一个项目,添加几个web文件,如home.js,home.css,home.cshtml"

发布文件 / 发布目录 / 发布项目

插件的三个功能,分别针对文件,目录,整个项目.可以发布项目中选中的单个或多个文件,目录.发布项目则是编译项目后,发布所有文件.

在项目管理窗口中,右击一个(或多个)文件,点击菜单项 "发布文件 Alt+1 Alt+1" 可以发布该文件.

当前正在编辑的文件可以按Alt+QQ发布.为了便于修改文件后马上发布.

同理,右击文件夹时,会发布文件夹中的所有文件.

右击项目时,点击菜单项"发布web",这时会先编译该项目,然后发布项目中所有文件.

发布时会判断文件类型,如果是js,css,jpg等web静态文件,则会直接复制到发布目录.cshtml文件会编译成html输出,这是插件的主要功能.

  • 发布文件 (Alt + 1 + 1)
  • 发布活动文件 (Alt + q + q)
  • 发布目录 (Alt + 2 + 2)
  • 发布项目 (Alt + 3 + 3)

配置文件

发布功能由配置文件设定,文件位于项目根目录下,默认名"publish.json",每次发布动作时,会读取这个文件.

配置文件可以设定发布到哪个目录,允许发布文件,不允许发布文件,发布前是否清空发布目录.

首次发布时如果没有配置文件,插件程序会在项目根目录下生成默认的publish.json".

{
  // 源文件目录名(例如:src 相对路径,相对于项目根目录)
  "sourceDir": "src",
  // 发布目录名(例如: 'dist' 或 'd:/pubdir' 相对路径或绝对路径)
  "distDir": "dist",
  // 发布整个项目时,发布前删除发布目录所有内容
  "emptyPublishDir": "false",
  // 发布整个项目时,编译项目后发布bin文件夹
  "buildBin": "false",
  // 对js,css,html压缩输出(0=不压缩,7=都压缩. 1=html,2=css,4=js)
  "miniOutput": 7,
  // 允许发布的文件扩展名
  "allowExts": [ ".htm", ".html", ".cshtml", ".config", ".js", ".css", ".json", ".jpg", ".jpeg", ".gif", ".png", ".bmp", ".woff", ".woff2", ".ttf", ".svg", ".eot", ".otf" ],
  // 不允许发布的文件后缀名
  "denySuffix": [ "layout.cshtml", "part.cshtml", "part.js", "part.css" ],
  // 不允许发布的文件(例如:bundleconfig.json data/data.mdb 相对路径的文件名,相对于项目根目录)
  "denyFiles": [],
  // 不允许发布的目录(例如:cfg 相对路径,相对于项目根目录)
  "denyDirs": [],
  // 公共变量,一个json键值对例如{ name : 'mirror' , ... },将作为匿名对象作为Model传给cshtml文件,调用方法@Model.name
  "globleVar": null
}
  

RazorEngine

razorengine开源项目文档地址 https://antaris.github.io/RazorEngine/index.html

项目git地址 https://github.com/Antaris/RazorEngine

编译生成razor页面时,RazorEngine要使用RoslynCompiler工具编译.否则会出现编译卡死.在控制台程序中,默认的编译工具不会有问题,但做到插件中后出现卡死.

cshtml文件

基本上与razor用法一样,但是可用的功能非常少.

引用母版页

        @{
            // 使用母板页.(母板页只能引用一个,并且写在页面开始处)
            Layout="/src/layout/layout.cshtml";
        }
        

引用部分页

        <div>
            // 引入了一个分部页.(可以引用多个)
            @Include("/src/a_1.part.cshtml"); 
            // 递归的 : a_1.part.cshtml中也支持再引用layout和Include.
        </div>
        

命名约定

母版页名字约定后缀:layout.cshtml,片段页约定:part.cshtml

母板页示例

        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width,initial-scale=1.0">
                <link href="base.css" rel="stylesheet" />
                <title>@ViewBag.Title</title>
            </head>
            <body>
                @RenderBody()
            </body>
        </html>
        

主页面示例

        @{
            // 引用母板页
            Layout = "/layout.cshtml";
            // 对应母板页中的@ViewBag.Title
            ViewBag.Title = "页面标题-razorengine.dll";
            // 页面变量
            string hi = "hello world";
            string html = "<h1>hello world</h1>";
        }
        <div>@hi</div>
        // 如果变量是Html标记,可以使用Raw方法.否则输出字符串
        <div>@Raw(html)</div>
        // C#代码,这种行为和php那种内嵌一样的
        @for (int i = 0; i < 10; i++)
        {
            <div>循环输出 @i</div>
            // 如果只是文本,不需要html标签,可以用@("文本")这种方法输出
            @("不带html标签的文本") @(" 空一格多段文字")
        }
        

公用变量

配置文件中的GlobleVar属性,可写一些常量值.值的形式是json键值对.例如{name:xxx,title:xxx},在编译cshtml时,将作为Model传入

在cshtml中引用如下 @Model.name 和Razor语法一样.这里所有cshtml文件都是这一份Model,所以只能写些全局常用值

文件发布程序流程

从点击命令开始到文件发布结束的流程

  • 检查文件是否选中,项目是否为活动项目
  • 检查publish.json
    • 如果发布这个项目,会先编译项目
  • 计算文件路径,源文件路径和发布目标路径
  • 建立发布目录
  • 使用预定规则,选出符合发布要求的文件
  • 文件发布处理
    • 拼接文件绝对路径,按文件扩展名处理
    • cshtml文件,编译成html发布,js,html,css,img等文件复制到发布目录
    • 对于html,js,css是否mini化输出
  • 发布完成,打印信息到"输出"窗口

另外,对于发布整个项目时,会调用编译项目,先编译再发布.除了符合发布要求的文件,还包含bin目录下的所有文件.

Visual Studio平台的web相关插件

相比于node平台的webpack等前端打包工具的热度,vs平台就比较冷清,虽然功能上并不缺少,但在前后端分离之后,几乎很少有用vs平台做前端的了吧.

这个插件解决html生成问题.css,js的话,可以安装这几个插件,打包js成一个文件,编译less,scss,stylus等,非常好用.这样看来,vs工具做前端工程也较便利了.

NUglify

C#版本的压缩库,除了js,css外,主要是能压缩html.这个不是VS插件项目,是个工具库.可以做到自己的插件里

地址: https://github.com/xoofx/NUglify

BundlerMinifier

可以压缩js,将多个js合并成一个js.用于打包不错.

地址: https://github.com/madskristensen/BundlerMinifier

一个碰到的坑记录 (2020年1月3日)

BundlerMinifier的配置文件bundleconfig.json一般在项目根目录下,右击它,选"Bundler & Minifier",弹出的菜单有一项"Produce Output Files",这个要勾选,否则"Update Bundles"这个菜单点击不了.

WebCompiler

这个插件很全面,能压缩js,css,html.还能处理css预编译语言scss,stylus

地址: https://github.com/madskristensen/WebCompiler

ImageSprites

将图片合成一张图片,然后自动生成css的位置.做css裁剪时,再也不能量位置了

地址: https://github.com/madskristensen/ImageSprites

ImageOptimizer

能将图片缩小.类似熊猫压缩图片那种功能

地址: https://github.com/madskristensen/ImageOptimizer

Markdown Editor

markdown文档比较简洁,很多项目说明使用这种.git上的readme.md文件就是这语法的.形式上比html简洁,五分钟能上手.这个插件可以在编辑时对照效果.

地址: https://github.com/madskristensen/MarkdownEditor

这个项目

插件项目git: https://github.com/mirrortom/WebFilePublishVSIX