[笔记] 使用 Gulp 进行网页前端自动化 – 依照开发环境调整布署内容

章节连结

这篇笔记下如何依照开发环境来调整布署的内容,同时在布署前,自动先清理掉先前产出的静态档案内容,并依照现有的档案来生成全新的档案,已确保前后档案的一致性。
gulp logo


交付正式档案前准备

每次产生正式的发布档案前,可以运用 gulp.clean 的套件,来确保你新产出的档案,和你实际编辑是一致的。因为在编修过程中,你多少会去增减你的来源档案。别忘记增加 allowEmpty:true,以免因为资料夹不存在而报错。

依据环境来调整档案

正式交付档案时,程式码往往是会被压缩的。不过这样一来,你的程式码在编辑时就会不好阅读。可借由 minimist 来传入设定参数,并使用 gulp-if 来做简单的 if-else 控制,来达成效果。

新增一个 build 的流程

其实跟开发的自动化流程是很像的,移除最后的 watch 和 browser-sync 即可。由于 Gulp 4.0 之后,已经有 gulp.series 和 gulp.parallel 两个内建指令可以做到同步和非同步的进行,就不需要再安装 gulp-sequence 。


程式码


参考课程

Course 28 ~ Course 29 (全部一共有 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瀏覽人氣:30