Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Development Tools Gulp JS

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

最佳化你的流程,將你寶貴的時間專注在重要的開發上
Rating: 4.3 out of 54.3 (229 ratings)
1,352 students
Created by 卡斯伯 六角學院, 廖洧杰 liao, 六角 學院, 六角助教 六角學院
Last updated 8/2019
Traditional Chinese
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 能夠學會 Template Language, Sass, ES6 編譯
  • 學會如何自動化開發流程
  • 學會如何優化網站

Course content

6 sections • 48 lectures • 3h 54m total length

  • Preview04:41
  • Preview00:35
  • Preview09:48
  • Preview04:59
  • Nodejs 與他的環境
    08:35
  • 有沒有加入 -g 差異在哪裡呢?
    00:29
  • Gulp 自動化原理
    04:10
  • 開始前的說明
    02:14

  • Gulp 4.0 課程更新說明
    00:35
  • 課程使用的套件與相關連結
    02:09
  • 加入 Jade Template Language
    07:06
  • Jade src 路徑修改說明
    00:09
  • Node Sass 高速編譯你的 SCSS
    09:35
  • PostCSS 更高明的 CSS 優化流程
    07:33
  • AutoPrefixer 更新說明
    00:33
  • 關於 Watch 的監控
    00:12
  • load plugins 簡化 gulp 載入流程
    03:50
  • Babel ES6 編譯 (上)
    10:03
  • Babel ES6 編譯 (下 - Source Map 的運用)
    06:09
  • Babel 套件補充說明
    00:22
  • Bower 簡介
    00:53
  • Gulp 與 Bower 流程串接
    04:41
  • Gulp 與 Bower 程式碼串接
    05:17
  • Bower 額外補充說明
    01:00
  • 建立 網頁開發不可或缺的 Webservice
    05:06
  • 壓縮優化你的程式碼
    06:41
  • gulp minify CSS 與 Webservice 補充說明
    00:41
  • 依據開發環境調整你的輸出內容
    08:43
  • 釋出你的開發成品
    07:02

  • 圖片壓縮技巧
    04:22
  • Preview05:17
  • Preview04:20
  • Preview07:48

  • Preview05:40
  • 透過簡單的語法,快速入門 Jade
    08:11
  • 透過工具來快速轉換 Jade 語法
    06:50
  • 製作你的 HTML 樣板
    07:24
  • Jade 匯入外部 JSON 資料內容
    08:55
  • 使用 Each 處理資料並產生選單
    06:53
  • 使用 Each 處理大量資料
    03:28
  • 使用 Mixin 來製作 HTML 模組
    08:00

  • 章節簡介
    02:15
  • 使用 includePaths 載入外部 Sass 資源
    07:05
  • 合併來自於 NPM 的 JavaScript 資源
    06:32

  • 如何升級成 Gulp 4.0
    09:27
  • 確認任務完成的方法
    00:51
  • 直接將 watch, browserSync 加入任務函式中
    03:36
  • Gulp 4.0 的模組化手法
    03:34

Requirements

  • 對於 HTML, CSS, JavaScript 有基本暸解的學生

Description

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

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

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

Who this course is for:

  • 想要優化網頁前端流程的開發者

Instructors

卡斯伯 六角學院
前端設計師、前端工程師
卡斯伯 六角學院
  • 4.7 Instructor Rating
  • 11,201 Reviews
  • 22,330 Students
  • 20 Courses

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

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

廖洧杰 liao
前端工程師
廖洧杰 liao
  • 4.7 Instructor Rating
  • 11,201 Reviews
  • 22,330 Students
  • 20 Courses

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

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


如果你有意成為網頁設計師,前端工程師,歡迎參考我們的課程,我們是六角學院,希望能帶領您進入程式領域,線上帶您學到會 :D

 

六角 學院
Udemy 台灣合作夥伴
六角 學院
  • 4.7 Instructor Rating
  • 11,201 Reviews
  • 22,329 Students
  • 20 Courses

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

我們承諾以下事項:

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


六角助教 六角學院
六角學院助教
六角助教 六角學院
  • 4.7 Instructor Rating
  • 10,311 Reviews
  • 22,290 Students
  • 18 Courses

六角學院 是一所線上程式開發學習單位,目前已累積超過 15,000 名學員,讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是,如果您贊同我們的理念,歡迎加入六角。

我們將深入了解您想發展的領域,每位實習生我們都會量身打造專屬於您的舞台,並讓您實際瞭解公司營運 Know how。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.