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. CodeForces - 519D(思维+前缀和)

    题意 https://vjudge.net/problem/CodeForces-519D 给定每个小写字母一个数值,给定一个只包含小写字母的字符串 s,求 s 的子串 t 个数,使 t满足: 首位字 ...

  2. 形如 T(n) = a * T(n/b) + f(n) 的时间复杂度计算方法

    形如 T(n) = a * T(n/b) + f(n) 的时间复杂度计算方法 有一种方法叫做主方法(Master method)是用来专门计算这种形式的时间复杂度的,方法具体如下: 下边举例进行说明: ...

  3. QForkMasterInit: system error caught. error code=0x000005af, message=VirtualAllocEx failed.(遇到还没试过)

    今天在使用Redis的时候出现以下错误: QForkMasterInit: system error caught. error code=0x000005af, message=VirtualAll ...

  4. C#开发微信小程序(四)

    导航:C#开发微信小程序系列 关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中 ...

  5. CRC校验算法的实例解析

    概念   CRC校验算法,说白了,就是把需要校验的数据与多项式进行循环异或(XOR), 进行XOR的方式与实际中数据传输时,是高位先传.还是低位先传有关.对于数据 高位先传的方式,XOR从数据的高位开 ...

  6. Spring 关于ResponseBody注解的作用

    //responseBody一般是作用在方法上的,加上该注解表示该方法的返回结果直接写到Http response Body中,常用在ajax异步请求中, //在RequestMapping中 ret ...

  7. 【原创】flash中DataGrid数据列显示顺序的解决办法(非数据排序)

    今天在用flash做一个简单的地图展示功能,需要把xml绑定到DataGrid,完成后,又仔细看了几遍,发现列的顺序不对,准确的说是不稳定,不固定,于是在网上查了一下,没有相关的内容.于是自己研究了一 ...

  8. 熔断器Hystrix及服务监控Dashboard

    服务雪崩效应 当一个请求依赖多个服务的时候: 正常情况下的访问 : 但是,当请求的服务中出现无法访问.异常.超时等问题时(图中的I),那么用户的请求将会被阻塞. 如果多个用户的请求中,都存在无法访问的 ...

  9. Python3如何安装pip工具?

    前几天安装Python的时候没有装上pip工具,所以只能现在手动安装了. 首先,访问https://bootstrap.pypa.io/get-pip.py这个网址,然后Ctrl+S将get-pip. ...

  10. C lang:Pointer and Array

    Xx_Introduction Point and Array germane. Xx_Code #include<stdio.h> #define SIZE 4 int main(voi ...