使用 gulp 進行網頁前端自動化
4.8 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
293 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 使用 gulp 進行網頁前端自動化 to your Wishlist.

Add to Wishlist

使用 gulp 進行網頁前端自動化

最佳化你的流程,將你寶貴的時間專注在重要的開發上
4.8 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
293 students enrolled
Last updated 7/2017
Traditional Chinese
Price: $25
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 7 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 能夠學會 Template Language, Sass, ES6 編譯
  • 學會如何自動化開發流程
  • 學會如何優化網站
View Curriculum
Requirements
  • 對於 HTML, CSS, JavaScript 有基本暸解的學生
Description

在本課程中,您將會學習到如何使用 Gulp 處理網頁自動化流程
課程包含的自動化項目如下:

  1. Jade Template language
  2. Sass 與 PostCSS 
  3. Babel JavaScript ES6 
  4. Web Server
  5. CSS, JavaScript 依環境自動化壓縮

這些課程將會教你怎樣製作自己的自動化工具
並在一個指令下就完成以上操作
讓你開發不落人後

Who is the target audience?
  • 想要優化網頁前端流程的開發者
Students Who Viewed This Course Also Viewed
Curriculum For This Course
38 Lectures
03:19:04
+
Gulp 是什麼以及它需要的環境
8 Lectures 35:01

Windows 與 Mac 安裝說明
00:23

Nodejs 官方網站連結:
https://nodejs.org/en/

指令說明:
## Windows 指令
# 回到資料夾頂端
cd\

# 回到上一層
cd..

# 進入資料夾路徑
cd {‌{ 資料夾路徑 }}

## Nodejs 指令
# Nodejs 版本

node -v

# npm 版本
npm -v

# 安裝 Global Gulp 環境
npm install gulp -g

Preview 09:48

Nodejs 官方網站連結:

https://nodejs.org/en/

指令說明:
## Mac OS 指令
# 回到資料夾頂端
cd \

# 回到上一層
cd ..

# 進入資料夾路徑
cd {‌{ 資料夾路徑 }}

# Nodejs 版本
node -v

# npm 版本
npm -v

# 安裝 Global Gulp 環境
npm install gulp -g

# 如果無法安裝  Global Gulp 環境,請用以下並輸入系統密碼
sudo npm install gulp -g

Gulp 環境 (Mac 安裝 Nodejs 篇)
04:59

Nodejs 與他的環境
08:35

有沒有加入 -g 差異在哪裡呢?
00:11

Gulp 自動化原理
04:10

開始前的說明
02:14
+
Gulp 開發流程
18 Lectures 01:23:34
課程使用的套件與相關連結
00:28

加入 Jade Template Language
07:06

Jade src 路徑修改說明
00:01

Node Sass 高速編譯你的 SCSS
09:35

PostCSS 更高明的 CSS 優化流程
07:33

目前版本的 Watch 並無法監控到 "新增” 及 “刪除” 的檔案更動
所以是新增的檔案下,是必須重啟 gulp 服務才能繼續監控
或者是使用另一個 gulp-watch 套件
https://www.npmjs.com/package/gulp-watch

關於 Watch 的監控
00:04

load plugins 簡化 gulp 載入流程
03:50

Babel ES6 編譯 (上)
10:03

Babel ES6 編譯 (下 - Source Map 的運用)
06:09

Bower 簡介
00:53

Gulp 與 Bower 流程串接
04:41

Gulp 與 Bower 程式碼串接
05:17

Bower 額外補充說明
00:17

建立 網頁開發不可或缺的 Webservice
05:06

壓縮優化你的程式碼
06:41

gulp minify CSS
00:03

依據開發環境調整你的輸出內容
08:43

釋出你的開發成品
07:02
+
補充說明
4 Lectures 21:47
圖片壓縮技巧
04:22

Gulp 與 Git
05:17


npm install 中的 --save 與 --save-dev 之差異
07:48
+
額外課程 Template Language
8 Lectures 55:21

透過簡單的語法,快速入門 Jade
08:11

透過工具來快速轉換 Jade 語法
06:50

製作你的 HTML 樣板
07:24

Jade 匯入外部 JSON 資料內容
08:55

使用 Each 處理資料並產生選單
06:53

使用 Each 處理大量資料
03:28

使用 Mixin 來製作 HTML 模組
08:00
About the Instructor
王志誠 Wang
4.7 Average rating
2,842 Reviews
10,363 Students
10 Courses
前端設計師、前端工程師

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,我還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

廖洧杰 liao
4.7 Average rating
2,842 Reviews
10,363 Students
10 Courses
前端工程師

你好,我是六角學院的校長,洧杰,

我是熱愛分享與交流的前端工程師,目前專注於兼容 Desktop / Mobile 網頁前端開發,期間已協助數百位平面設計師、網頁設計師導入標準網頁設計。

同時我也是高雄前端社群創辦人,於2013年3月31日創立社群,每月固定舉辦前端主題聚會,至今已舉辦超過30場聚會,不重複參與人數破千位,2015年協助14位平面設計師、網頁工程師轉職為前端工程師。同時也是國立高雄大學資管前端兼任講師、業界講師。

六角 學院
4.7 Average rating
2,842 Reviews
10,363 Students
10 Courses
Udemy 台灣合作夥伴

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

我們承諾以下事項:

  • 一次付費,課程內容沒有期限
  • 課程內容更新,無需額外付費
  • 價格調整,已付費者不受影響
  • Udemy、Mail、Facebook 等各頻道發問一定會得到回答
  • 30 天內無條件退款