使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS
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。官方下载地址:
安装完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
插件推荐
安装一些插件,将有助于你更有效率的开发。
- C# Extensions 可快速添加类和接口
- Visual Studio Keymap 将键盘按键设置成和Visual Studio一样
微软官方有非常详尽的使用说明文档和使用技巧:https://code.visualstudio.com/docs
原文地址:http://www.zkea.net/codesnippet/detail/zkeacms-vscode.html
使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS的更多相关文章
- 使用vs code开发纸壳CMS并启用Razor智能提示
关于纸壳CMS 纸壳CMS是一个开源免费的,可视化设计,在线编辑的内容管理系统.基于ASP .Net Core开发,插件式设计: 下载代码 GitHub:https://github.com/Seri ...
- 用Docker自动构建纸壳CMS
纸壳CMS可以运行在Docker上,接下来看看如何自动构建纸壳CMS的Docker Image.我们希望的是在代码提交到GitHub以后,容器镜像服务可以自动构建Docker Image,构建好以后, ...
- 纸壳CMS可视化建站系统搭建多语言网站
纸壳CMS是可视化建站系统,现已经从架构上支持多语言.但是多语言功能默认是没有开启的.您可以从设置中开启多语言,或者随时关闭它,您可以随时进行切换. 开启多语言 如果您没有在系统设置中看到多语言设置菜 ...
- 纸壳CMS替换默认实现
简介 纸壳CMS是一个开源免费的可视化内容管理建站系统,拖拽就可以轻松建网站. GitHub: http://github.com/SeriaWei/ZKEACMS 纸壳CMS在设计上使用的是ASP. ...
- 在Docker中运行纸壳CMS并配置使用MySql
纸壳CMS是基于ASP.Net Core开发的可视化内容管理系统,可以跨平台部署,可以在容器中运行.接下来看看如何在docker中运行纸壳CMS. GitHub:https://github.com/ ...
- ASP .Net Core路由(Route) - 纸壳CMS的关键
关于纸壳CMS 纸壳CMS是一个开源免费的,可视化设计,在线编辑的内容管理系统.基于ASP .Net Core开发,插件式设计: GitHub:https://github.com/SeriaWei/ ...
- 纸壳CMS的插件加载机制
纸壳CMS是一个开源的可视化设计CMS,通过拖拽,在线编辑的方式来创建网站. GitHub https://github.com/SeriaWei/ZKEACMS.Core 欢迎Star,Fork,发 ...
- 纸壳CMS 3.0升级.Net Core 2.1性能大提升
微软发布了.Net Core 2.1正式版,纸壳CMS也在第一时间做了升级,并做了一系列的优化和调整,性能大幅提升,并解决了一些历史遗留问题,添加了一些新功能. Github https://gith ...
- 纸壳CMS(ZKEACMS)体验升级,快速创建页面,直接在页面中修改内容
关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...
随机推荐
- 《Web Development with Go》Mangodb查询一条记录
select加where package main import ( "fmt" "log" "time" "gopkg.in/m ...
- 使用Mybatis实现动态SQL(二)
使用Mybatis实现动态SQL 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 写在前面: *本章节适合有Mybatis基础者观看* 使用Mybatis实现动态SQL ...
- 关于华为模拟器eNSP-防火墙USG6000V怎么重装镜像
一.首先关闭eNSP软件 二.打开Oracle VM VirtualBox 三.单击VirtualBox “管理 - 虚拟介质管理”,将vfw_usg.vdi下面的子链接释放然后删除 四.最后回到主界 ...
- 基于Redis消息的订阅发布应用场景
目录 基于Redis消息的订阅发布应用场景 1.应用背景 2.困境 2.1 锁表风险 2.2 实时性差 2.3 增加编程复杂性 2.4 实时效果 3.解决方案 3.1 前端传值给服务端 3.2 服务端 ...
- Windows CLI命令
目录 Windows CLI命令 1.背景 2.netstat 罗列端口号占用情况 3.telnet 远端IP的某个端口号 Windows CLI命令 1.背景 在Windows操作系统下开发,需要用 ...
- Pull Request 工作流——更高效的管理代码
目录 Pull Request 工作流--更高效的管理代码 1.问题 2.解决方案 3.Git分支流管理代码具体实施 3.1本地分支操作管理 3.1.1查看分支 3.1.2创建分支 3.1.3切换分支 ...
- MySQL修改数据库时区
--查看数据库时区设置mysql> show variables like "%time_zone%"; +------------------+--------+ | Va ...
- 知识图谱基础之RDF,RDFS与OWL 2
https://zhuanlan.zhihu.com/p/32122644 看过之前两篇文章([1](为什么需要知识图谱?什么是知识图谱?——KG的前世今生), [2](语义网络,语义网,链接数据和知 ...
- 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: ...
- Anaconda创建环境失败,提示无法定位程序输入点
https://blog.csdn.net/qq_37465638/article/details/100071259 这篇博客写得很清楚,是anaconda下Library下lib下的一个文件和DD ...