[笔记] HTML 与 PUG 线上格式转换

章节连结

  • 参考课程
  • 相关文章
  • 这篇笔记下网络上好用的 HTML 和 PUG 格式互相转换的工具。若你是使用 Visual Studio,那么也有不少好用的转换器可供使用。
    gulp logo


    HTML 转成 PUG

    网页版可以使用:HTML to PUG 、 HTML to Pug / Jade
    pug demoVS Code 套件的话,可以使用 html2pug 。
    pug extension

    PUG 转成 HTML

    网页版可以使用:PugHTML
    VS Code 套件的话,可以使用 Pug to HTML 。


    参考课程

    Course 28 ~ Course 29 (全部一共有 48 Courses)

    请注意:本系列文章为个人对应课程的消化吸收后,所整理出来的内容。换言之,并不一定会包含全部的课程内容,也有可能会添加其他资源来说明。课程连结网址:http://tinyurl.com/y9fp69lb


    相关文章

    ★全文分享★  [指南] 前端自动化开发 Gulp + PHP + Browserify
    [指南] 前端自动化开发 Gulp + PHP + Browserify
    虽说使用 Gulp 搭配 Browserify 可以成功在前端开发时启用 Hot Reload,不过若你在网址列开启时输出的是 Cannot Get / 的字样,那么你的后端服务器就有一定机率是 PHP,那就得先额外先连上 PHP 服务器后,
    ★全文分享★  [指南] 前端自动化开发工具 Gulp 4 + Babel 7 + Browserify 整合纪录
    [指南] 前端自动化开发工具 Gulp 4 + Babel 7 + Browserify 整合纪录
    最近因为工作上需要,重拾 Gulp 来作套件管理并自动化前端网页撰写的流程。想不到随着 Babel 的版本提升,容易采坑的点也越来越多。这边笔记下完整脚本和流程供以后参考。流程基本流程,浏览
    ★全文分享★  [笔记] 使用 Gulp 进行网页前端自动化 – 用一般 HTML 来制作样板并排版
    [笔记] 使用 Gulp 进行网页前端自动化 – 用一般 HTML 来制作样板并排版
    虽说用 pug 来进行排版算是很方便,不过对于已经习惯 HTML 标签格式的我来说,要上手还是有一点难度。于是经过了无数测试和寻找后,最后选定用 gulp-template 来进行排版,可以得到如同用 pug 一般
    ★全文分享★  [笔记] 使用 Gulp 进行网页前端自动化 – 依照开发环境调整布署内容
    [笔记] 使用 Gulp 进行网页前端自动化 – 依照开发环境调整布署内容
    这篇笔记下如何依照开发环境来调整布署的内容,同时在布署前,自动先清理掉先前产出的静态档案内容,并依照现有的档案来生成全新的档案,已确保前后档案的一致性。交付正式档案前准备每
    ★全文分享★  [笔记] 使用 Gulp 进行网页前端自动化 – 架设简易服务器和压缩程式码
    [笔记] 使用 Gulp 进行网页前端自动化 – 架设简易服务器和压缩程式码
    这篇要笔记下的是让前端开发时可以摆脱服务器,达成编译完后可以自动打开浏览器浏览,同时压缩你的程式码。架设 WebService1. 先安装 BrowserSync ,并新增一个静态的服务器网址,指向你编译出来
    ★全文分享★  [笔记] 使用 Gulp 进行网页前端自动化 – Gulp 和 Bower 串接
    [笔记] 使用 Gulp 进行网页前端自动化 – Gulp 和 Bower 串接
    Gulp 搭配上 Bower 和 Bootstrap 4 前端套件,可以快速的做到前端样板管理。不过 Gulp 4 和前一版的作法有些不同,这边笔记一下串接的方法。串接上 Bower1. Bower 是一套前端套件的管理工具,虽然说是很
    ★全文分享★  [笔记] 使用 Gulp 进行网页前端自动化 – PostCSS 自动加上前缀 & Load Plugins
    [笔记] 使用 Gulp 进行网页前端自动化 – PostCSS 自动加上前缀 & Load Plugins
    这篇笔记下用 gulp-postcss、autoprefixer……等等套件,节省你的时间和加强浏览器相容性。加强 CSS 相容性由于浏览器的相容性彼此之间不相同,有可能在 CSS 的解读上,需要加上一些前缀词,那么 autop
    ★全文分享★  [笔记] 使用 Gulp 进行网页前端自动化 – 初始化你的第一个 Gulp 编译专案
    [笔记] 使用 Gulp 进行网页前端自动化 – 初始化你的第一个 Gulp 编译专案
    这篇笔记下用 Gulp 来编译你的档案,需要安装 gulp-jade, gulp-sass, gulp-plumber 后,再 gulpfile.js 进行修改。编译你的第一个专案Gulp 截至2020年,运行版本为 4.0。由于影片的版本是 3.X 版本,所以有些指令
    ★全文分享★  [笔记] 使用 Gulp 进行网页前端自动化 – 简介
    [笔记] 使用 Gulp 进行网页前端自动化 – 简介
    Gulp 是一个前端自动化工具。由于浏览器只认识原生的 HTML, CSS 和 JavaScript (ES6的支援度各浏览器不同),而 Gulp 可以帮你节省编译的流程,让你可以更专注在开发上,同时也可以根据环境来制定是否
    按赞加入粉丝团

    延伸阅读