Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作。如今可以使用VS Code进行纸壳CMS(ZKEACMS)开发,它开源免费,通过安装开发语言相关的插件,可以让VS Code实现相应的语法识别和代码提示。

安装.Net Core SDK

安装.net core sdk是开发纸壳cms的首要条件,前往微软的官方网站下载安装最新版本.net core sdk:

https://dotnet.microsoft.com/download

安装Visual Studio Code

Visual Studio Code最新版官方下载地址

https://code.visualstudio.com/

安装Node.js

需要安装Node.js是因为我们要使用它来编译项目中的主题(less),压缩JavaScript和CSS。官方下载地址:

https://nodejs.org/

安装完Node.js后,使用以下命令来安装gulp:

npm install gulp-cli -g

  

到这里,我们的开发环境就已经准备完成了。接下来需要下载最新版本的纸壳CMS源代码:

git clone https://github.com/SeriaWei/ZKEACMS.git

  

如果你不知道要如何下载,参考这篇文章:如何使用git下载ZKEACMS源代码

打开项目

首先打开安装好的vs code,然后选择打开目录:

选择纸壳cms所在的目录:

打开后可看到如下图所示:

如果你是首次打开C#项目,vs code会提示你安装C#扩展插件。如果没有安装,请手动安装:

安装完成以后,就可以尝试使用ctrl+shift+b来生成项目了。现在,你已经可以开始使用VS Code进行自由的创作了:),当然如果你要编译项目中的主题(less),压缩JavaScript(*.min.js)和CSS(*.min.css),还需要做一点工作。

还原Node.js包

选择终端菜单下的任务菜单:

选择npm:install来安装和还原所有的依赖项,安装完成以后,在你的项目文件夹会多出一个node_modules的目录,请不要删除它:

编译主题

还是选择终端菜单下的任务菜单:

然后选择gulp:compile-theme:default来编译默认主题

注意:如果你添加了新的主题,请注意对应修改项目根目录下的gulpfile.js,以确保你的新主题可以被正确的编译。

gulp.js是一个自动化构建工具(https://www.gulpjs.com.cn/),以下是编译主题,压缩JS和CSS的定义:

https://github.com/SeriaWei/ZKEACMS/blob/master/gulpfile.js

自动编译主题和压缩JS, CSS

当你在修改主题或者JS,CSS的时候,可以开启自动任务来自动编译主题和压缩JS,CSS,打开任务菜单,选择:gulp:watch:theme-js-css

这样,在文件被修改后,会自动执行相关的编译或者压缩任务。

编译单个插件

在开发的时候,如果每次都编译整个项目,会比较花时间,如果只修改了单个插件的代码,可选择只编译对应的插件以节省时间。打开任务菜单,选择对应的插件即可:

运行调试

选项调试菜单下的开始调试或者直接按F5,然后打开浏览器访问http://localhost:5000

插件推荐

安装一些插件,将有助于你更有效率的开发。

微软官方有非常详尽的使用说明文档和使用技巧:https://code.visualstudio.com/docs

原文地址http://www.zkea.net/codesnippet/detail/zkeacms-vscode.html

使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS的更多相关文章

  1. 使用vs code开发纸壳CMS并启用Razor智能提示

    关于纸壳CMS 纸壳CMS是一个开源免费的,可视化设计,在线编辑的内容管理系统.基于ASP .Net Core开发,插件式设计: 下载代码 GitHub:https://github.com/Seri ...

  2. 用Docker自动构建纸壳CMS

    纸壳CMS可以运行在Docker上,接下来看看如何自动构建纸壳CMS的Docker Image.我们希望的是在代码提交到GitHub以后,容器镜像服务可以自动构建Docker Image,构建好以后, ...

  3. 纸壳CMS可视化建站系统搭建多语言网站

    纸壳CMS是可视化建站系统,现已经从架构上支持多语言.但是多语言功能默认是没有开启的.您可以从设置中开启多语言,或者随时关闭它,您可以随时进行切换. 开启多语言 如果您没有在系统设置中看到多语言设置菜 ...

  4. 纸壳CMS替换默认实现

    简介 纸壳CMS是一个开源免费的可视化内容管理建站系统,拖拽就可以轻松建网站. GitHub: http://github.com/SeriaWei/ZKEACMS 纸壳CMS在设计上使用的是ASP. ...

  5. 在Docker中运行纸壳CMS并配置使用MySql

    纸壳CMS是基于ASP.Net Core开发的可视化内容管理系统,可以跨平台部署,可以在容器中运行.接下来看看如何在docker中运行纸壳CMS. GitHub:https://github.com/ ...

  6. ASP .Net Core路由(Route) - 纸壳CMS的关键

    关于纸壳CMS 纸壳CMS是一个开源免费的,可视化设计,在线编辑的内容管理系统.基于ASP .Net Core开发,插件式设计: GitHub:https://github.com/SeriaWei/ ...

  7. 纸壳CMS的插件加载机制

    纸壳CMS是一个开源的可视化设计CMS,通过拖拽,在线编辑的方式来创建网站. GitHub https://github.com/SeriaWei/ZKEACMS.Core 欢迎Star,Fork,发 ...

  8. 纸壳CMS 3.0升级.Net Core 2.1性能大提升

    微软发布了.Net Core 2.1正式版,纸壳CMS也在第一时间做了升级,并做了一系列的优化和调整,性能大幅提升,并解决了一些历史遗留问题,添加了一些新功能. Github https://gith ...

  9. 纸壳CMS(ZKEACMS)体验升级,快速创建页面,直接在页面中修改内容

    关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...

随机推荐

  1. 《Web Development with Go》Mangodb查询一条记录

    select加where package main import ( "fmt" "log" "time" "gopkg.in/m ...

  2. 使用Mybatis实现动态SQL(二)

    使用Mybatis实现动态SQL 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 写在前面:        *本章节适合有Mybatis基础者观看* 使用Mybatis实现动态SQL ...

  3. 关于华为模拟器eNSP-防火墙USG6000V怎么重装镜像

    一.首先关闭eNSP软件 二.打开Oracle VM VirtualBox 三.单击VirtualBox “管理 - 虚拟介质管理”,将vfw_usg.vdi下面的子链接释放然后删除 四.最后回到主界 ...

  4. 基于Redis消息的订阅发布应用场景

    目录 基于Redis消息的订阅发布应用场景 1.应用背景 2.困境 2.1 锁表风险 2.2 实时性差 2.3 增加编程复杂性 2.4 实时效果 3.解决方案 3.1 前端传值给服务端 3.2 服务端 ...

  5. Windows CLI命令

    目录 Windows CLI命令 1.背景 2.netstat 罗列端口号占用情况 3.telnet 远端IP的某个端口号 Windows CLI命令 1.背景 在Windows操作系统下开发,需要用 ...

  6. Pull Request 工作流——更高效的管理代码

    目录 Pull Request 工作流--更高效的管理代码 1.问题 2.解决方案 3.Git分支流管理代码具体实施 3.1本地分支操作管理 3.1.1查看分支 3.1.2创建分支 3.1.3切换分支 ...

  7. MySQL修改数据库时区

    --查看数据库时区设置mysql> show variables like "%time_zone%"; +------------------+--------+ | Va ...

  8. 知识图谱基础之RDF,RDFS与OWL 2

    https://zhuanlan.zhihu.com/p/32122644 看过之前两篇文章([1](为什么需要知识图谱?什么是知识图谱?——KG的前世今生), [2](语义网络,语义网,链接数据和知 ...

  9. XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1)

    XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1) APPLIES TO: ...

  10. Anaconda创建环境失败,提示无法定位程序输入点

    https://blog.csdn.net/qq_37465638/article/details/100071259 这篇博客写得很清楚,是anaconda下Library下lib下的一个文件和DD ...