[笔记] 使用 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


相关文章

★全文分享★  [指南] 前端自动化开发 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 的版本提升,容易采坑的点也越来越多。这边笔记下完整脚本和流程供以后参考。流程基本流程,浏览
★全文分享★  [笔记] 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 进行网页前端自动化 – 架设简易服务器和压缩程式码
这篇要笔记下的是让前端开发时可以摆脱服务器,达成编译完后可以自动打开浏览器浏览,同时压缩你的程式码。架设 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 可以帮你节省编译的流程,让你可以更专注在开发上,同时也可以根据环境来制定是否
按赞加入粉丝团

延伸阅读