• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

yscoder/gulp-ejs-demo: gulp+ejs 合并静态页模版,文件更新自动刷新。 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

yscoder/gulp-ejs-demo

开源软件地址(OpenSource Url):

https://github.com/yscoder/gulp-ejs-demo

开源编程语言(OpenSource Language):

HTML 83.2%

开源软件介绍(OpenSource Introduction):

gulp-ejs-demo

gulp+ejs 合并静态页模版,文件更新自动热重载。

  • npm install 安装依赖
  • gulp dev 启动一个自动热重载的服务器,默认端口3000
  • gulp ejs 合并模版,服务器启动时会自动监听文件更新执行该任务

流程

  1. 模板编码,即 templates/ 目录,页面入口以 .html 结尾,分支模版以 .ejs 结尾,没有目录结构限制,按需引入或编写新的页面模块。在这个阶段可以启动服务器 gulp dev 进行实时页面预览。

  2. 编写数据文件,分为全局数据文件 global.json 和页面数据文件,使用通用的 json 格式。全局数据文件必须放到模版根目录,一个页面对应一个同名的数据文件同级目录。数据中可以写,比如: title:页面标题styles:依赖的样式文件路径scripts:依赖的脚本文件路径 ,随时可以根据实际情况添加新的数据项。

  3. 执行 gulp ejs 任务,生成页面到 html/ 目录,如果之前启动了热重载服务器不需要这一步。

其他

实际工作中肯定还会搭配其他任务一起运行,比如:css 和 js 相关任务。此 Demo 中省略,可根据各自项目情况自行更改。




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
imlucas/gulp-juice: process html files through juice to inline CSS发布时间:2022-06-21
下一篇:
NullRefExcep/gulp-casperjs: gulp plugin for CasperJS发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap