[笔记] 使用 Gulp 进行网页前端自动化 – 简介

章节连结

Gulp 是一个前端自动化工具。由于浏览器只认识原生的 HTML, CSS 和 JavaScript (ES6的支援度各浏览器不同),而 Gulp 可以帮你节省编译的流程,让你可以更专注在开发上,同时也可以根据环境来制定是否要输出压缩版本。
gulp logo


Gulp 安装

Gulp 官网:https://gulpjs.com/
首页大大的写着「自动化工具包,让你提升工作流」
gulp intro
1. 这个套件本身是依赖在 Node.js 下面,所以请先安装 Node.js 后,再用 npm i gul[email protected] -g 全域安装 gulp。
2. 接着在专案资料夹中,输入 npm init,建立 package.json 档案
3. 以 npm i gulp 安装 gulp 后,就可以使用 gulp 指令了。


起始环境建立

1. 运用 Command Line 指令,切换到专案资料夹,并建立一个 gulpfile.js 的档案。
2. 在专案资料夹下,建立 source 的资料夹,里头新增一个简易的 index.html 档案。
3. 在 gulpfule.js 中,新增一个 copyHTML 任务,将 source 里头的 .html 档案,编译输出到 public 资料夹
4. 输入 gulp copyHTML ,就完成了。


Gulp 原理和指令


参考课程

Course 1 ~ Course 8 (全部一共有 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瀏覽人氣:23