[笔记] 使用 Gulp 进行网页前端自动化 – 架设简易伺服器和压缩程式码

章节连结

这篇要笔记下的是让前端开发时可以摆脱伺服器,达成编译完后可以自动打开浏览器浏览,同时压缩你的程式码。
gulp logo


架设 WebService

1. 先安装 BrowserSync ,并新增一个静态的伺服器网址,指向你编译出来的档案资料夹 (如:/public)
2. 监控 .jade, .scss, .js 等等档案,当有新编译的结果时,会自动刷新网页。
3. browser-sync 和 watch 要同步执行

编译完成后,进行压缩

1. 运用 gulp-clean-css 压缩 Css、gulp-uglify 压缩 javascript,将程式运行时不需要的缩排和空行给除去
2. 压缩后的档案,再存放到对应的资料夹。换言之,这串相关的指令码多半会放在 gulp.dest(……) 的前面


程式码


参考课程

Course 25 ~ Course 27 (全部一共有 48 Courses)

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


相关文章

★全文分享★  [笔记] HTML 与 PUG 线上格式转换
[笔记] HTML 与 PUG 线上格式转换
这篇笔记下网路上好用的 HTML 和 PUG 格式互相转换的工具。若你是使用 Visual Studio,那么也有不少好用的转换器可供使用。HTML 转成 PUG网页版可以使用:HTML to PUG 、 HTML to Pug / JadeVS Code 套件的话,可
★全文分享★  [笔记] 使用 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 可以帮你节省编译的流程,让你可以更专注在开发上,同时也可以根据环境来制定是否
按赞加入粉丝团

延伸阅读

GA浏览人气:4