Enviar búsqueda
Cargar
CP 值很高的 Gulp
•
67 recomendaciones
•
13,129 vistas
Yvonne Yu
Seguir
介紹 gulp 給初學者前端學習
Leer menos
Leer más
Tecnología
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 31
Descargar ahora
Descargar para leer sin conexión
Recomendados
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
React.js what do you really mean?
React.js what do you really mean?
昱安 周
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
Will Huang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
Recomendados
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
React.js what do you really mean?
React.js what do you really mean?
昱安 周
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
Will Huang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
webpack 入門
webpack 入門
Anna Su
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
Will Huang
前端框架發展
前端框架發展
Chi-wen Sun
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
前端各階段工作
前端各階段工作
Chi-wen Sun
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
Will Huang
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
Will Huang
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的package
Alan Tsai
RxJS 6 新手入門
RxJS 6 新手入門
Will Huang
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
從軟體開發角度 談 Docker 的應用
從軟體開發角度 談 Docker 的應用
謝 宗穎
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
Will Huang
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang
Frontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
Yan Wang
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Will Huang
前端MVVM框架安全
前端MVVM框架安全
Borg Han
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
Automating your workflow with Gulp.js
Automating your workflow with Gulp.js
Bo-Yi Wu
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
Yvonne Yu
Más contenido relacionado
La actualidad más candente
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
webpack 入門
webpack 入門
Anna Su
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
Will Huang
前端框架發展
前端框架發展
Chi-wen Sun
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
前端各階段工作
前端各階段工作
Chi-wen Sun
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
Will Huang
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
Will Huang
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的package
Alan Tsai
RxJS 6 新手入門
RxJS 6 新手入門
Will Huang
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
從軟體開發角度 談 Docker 的應用
從軟體開發角度 談 Docker 的應用
謝 宗穎
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
Will Huang
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang
Frontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
Yan Wang
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Will Huang
前端MVVM框架安全
前端MVVM框架安全
Borg Han
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
La actualidad más candente
(20)
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
webpack 入門
webpack 入門
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
前端框架發展
前端框架發展
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
前端各階段工作
前端各階段工作
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
保哥線上講堂:利用 StyleCop 撰寫一致的 C# 程式碼風格
Nuget介紹- 如何使用和建立自己的package
Nuget介紹- 如何使用和建立自己的package
RxJS 6 新手入門
RxJS 6 新手入門
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
從軟體開發角度 談 Docker 的應用
從軟體開發角度 談 Docker 的應用
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Frontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
前端MVVM框架安全
前端MVVM框架安全
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Destacado
Automating your workflow with Gulp.js
Automating your workflow with Gulp.js
Bo-Yi Wu
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
Yvonne Yu
一拳前端考題
一拳前端考題
洧杰 廖
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Irfan Maulana
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
Irfan Maulana
我與編輯器
我與編輯器
Yvonne Yu
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
Gulp
Gulp
漢麟 王
Flux架構+ReactJS開發實作
Flux架構+ReactJS開發實作
Laura Lee
GSS Frontend Project Management
GSS Frontend Project Management
Laura Lee
Ext js 6
Ext js 6
Manav Gupta
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
Irfan Maulana
conjoon - The Open Source Webmail Client
conjoon - The Open Source Webmail Client
Thorsten Suckow-Homberg
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
Irfan Maulana
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
洧杰 廖
前端開發流程分享
前端開發流程分享
洧杰 廖
打造網站親和力
打造網站親和力
Yvonne Yu
Destacado
(20)
Automating your workflow with Gulp.js
Automating your workflow with Gulp.js
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
一拳前端考題
一拳前端考題
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Sencha ExtJs Learning Part 1 - Layout And Container in Sencha ExtJs - By Irfa...
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]
我與編輯器
我與編輯器
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
Gulp
Gulp
Flux架構+ReactJS開發實作
Flux架構+ReactJS開發實作
GSS Frontend Project Management
GSS Frontend Project Management
Ext js 6
Ext js 6
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
conjoon - The Open Source Webmail Client
conjoon - The Open Source Webmail Client
現代化網頁基礎排版技術
現代化網頁基礎排版技術
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
前端開發流程分享
前端開發流程分享
打造網站親和力
打造網站親和力
Similar a CP 值很高的 Gulp
Vic weekly learning_20160504
Vic weekly learning_20160504
LearningTech
前端自動化工具
前端自動化工具
國昭 張
ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索
Will Huang
scriptcs 簡介
scriptcs 簡介
Huan-Lin Tsai
Npm node.js的套件管理程式
Npm node.js的套件管理程式
Chuyi Huang
Asp.net mvc 6 新功能初探
Asp.net mvc 6 新功能初探
Gelis Wu
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
cachowu
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
Amigo 陳兆祥
[OSDC12]相依性管理 - 以Ruby開發為例
[OSDC12]相依性管理 - 以Ruby開發為例
YC Ling
Grunt
Grunt
lylijincheng
课题三:Nginx基础知识
课题三:Nginx基础知识
Liu Allen
Nagios的安装部署和与cacti的整合(linuxtone)
Nagios的安装部署和与cacti的整合(linuxtone)
Yiwei Ma
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
Hamilton Wong
Apache+php+mysql在Linux下的安装与配置
Apache+php+mysql在Linux下的安装与配置
wensheng wei
DAE 新变化介绍
DAE 新变化介绍
Tianwei Liu
icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介
Kito Cheng
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit
LainZQ
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
Zhen Li
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
Zhen Li
Ian 20150515 grunt
Ian 20150515 grunt
LearningTech
Similar a CP 值很高的 Gulp
(20)
Vic weekly learning_20160504
Vic weekly learning_20160504
前端自動化工具
前端自動化工具
ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索
scriptcs 簡介
scriptcs 簡介
Npm node.js的套件管理程式
Npm node.js的套件管理程式
Asp.net mvc 6 新功能初探
Asp.net mvc 6 新功能初探
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
[OSDC12]相依性管理 - 以Ruby開發為例
[OSDC12]相依性管理 - 以Ruby開發為例
Grunt
Grunt
课题三:Nginx基础知识
课题三:Nginx基础知识
Nagios的安装部署和与cacti的整合(linuxtone)
Nagios的安装部署和与cacti的整合(linuxtone)
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
Apache+php+mysql在Linux下的安装与配置
Apache+php+mysql在Linux下的安装与配置
DAE 新变化介绍
DAE 新变化介绍
icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
Ian 20150515 grunt
Ian 20150515 grunt
CP 值很高的 Gulp
1.
CP 值超⾼高的 GULP YVONNE
YU 1
2.
• 介紹 Gulp •
建置 Gulp 環境 • Gulp 語法 • Gulp 套件 2
3.
GULP 介紹 • 基於
node.js • 前端建構⼯工具 • 使⽤用 字串流 ⽅方式建制 3
4.
字串流(stream) 4 scss/*.scss 範例:編輯 scss ⾄至
css 檔案,並且 minify css css/*.css Read Files Write Files編譯 scss minify 程式碼 css minify css
5.
建置環境 5
6.
安裝 NODE.JS (NPM) http://nodejs.org
(mac 安裝說明) 6
7.
開始 GULP 專案 •
新增專案資料夾 • e.g. gulp-test 7 • npm install gulp - - save-dev • 新增 package.json 來管理套件 - npm init 新增 default package.json - 專案相依的套件有哪些
8.
8
9.
9 介紹 Package.json name*: 專案名稱 version*:
專案 version (1.0.0) dependencies: 存放專案需要的模組套件 (-save) - ex: jQuery, AngularJS, Bootstrap devDependencies: 存放開發需要的套件 ( --save-dev) - ex: gulp 套件, 測試⼯工具, etc * 號為必填
10.
10
11.
! • 新增 gulpfile.js
(檔名⼀一定要對) • require(‘gulp’); 在檔案裡 ! ! 11
12.
GULP 語法教學 12
13.
GULP.TASK • gulp.task(name, [,
deps], doSomething) 13 • 範例:gulp.task(‘scripts’, function () { // 處理 js }) • 新增⼀一個名叫 scripts 的任務 • 範例:gulp.task(‘build’, [‘css’, ‘scripts’]); • 新增⼀一個 build 任務,依序處理 css 跟 scripts 任務 在 terminal 輸⼊入 gulp [任務名稱] 就可以執⾏行任務 建任務
14.
GULP.SRC • 回傳指定路徑的檔案 • 參考
node-glob syntax ! ! 14 使⽤用在 templates 資料夾 下⾯面全部的 jade 檔案 指定輸⼊入檔案
15.
GULP.DEST • 發佈編輯好的檔案在指定路徑資料夾 • 如果資料夾沒有存在,會幫忙新增 ! ! 15 編譯後的
html 存 minify 後的檔案 輸出檔案位置
16.
GULP.WATCH • 當有檔案變動時會跑對應的 task 範例: ! ! 1.
觀察 js 資料夾下⾯面全部的 js 檔案,⼀一旦發現檔案有變更, 執⾏行 uglify 跟 reload 兩個任務。 2. 當有檔案變更,會發送 change event。可在跑檔案前做前 置作業。 16 觀察檔案
17.
GULP 套件介紹 npm install
[套件名稱] --save-dev 17
18.
• 截⽌止⾄至 2015/01/26,
總共有 1,207 套件 • for CSS: gulp-ruby-scss, gulp-less, gulp-sourcemaps, css-sprite, minify-css,autoprefixer, etc • for JavaScript: gulp-concat, gulp-uglify, jshint, gulp-coffee, etc • for build: gulp-util, gulp-plumber, gulp-browser-sync, gulp-load- plugins, gulp-changed, gulp-rename, gulp-livereload, gulp-clean, etc 18
19.
SCSS & MINIFY 19 1.
下載套件 2. 新增任務(Task) 3. 指定 input 位置 4. 編譯 sass 5. minify 編譯後的 css 6. 把 minify css 放置在 css 資料夾內 範例:編輯 scss ⾄至 css 檔案,並且 minify css
20.
CONCAT & UGLIFY 20 1.
uglify 每份 js 2. 把壓縮後的 js 合併 3. 合併 js 輸出到 dist/all.min.js 把 js 檔案醜化(混淆)並合併,⼤大幅減少檔案⼤大⼩小
21.
GULP-CHANGED 21 只處理有修改的檔案,不浪費時間處理沒有修改檔案 // jshint 語法檢測 把
changed 套件放在指定 路徑之後,跑 jshint 之前
22.
22 假如我們需要上述的範例的全部套件 1. 需要先在 package.json
宣告
23.
23 2. 再到 gulpfile.js
require 每個套件
24.
24 3. 開始使⽤用套件
25.
25 每新增⼀一個套件,都 要在兩個地⽅方宣告不會 很⿇麻煩嗎? 可以npm install 後就直接使⽤用嗎?
26.
GULP-LOAD-PLUGINS 26 偵測 package.json dependencies,並⾃自動幫忙載⼊入套件 1.
載⼊入並初始化 load-plguins 2. 改⽤用 load-plguins 寫法 範例:修改 scripts 任務的寫法
27.
27 好棒棒
28.
–中國諺語 「三個臭⽪皮匠,勝過⼀一個諸葛亮」 28 多試試各種套件組合 組出符合你需求的任務
29.
接下來? 29
30.
MORE REFERENCES • gulp
github - gulp recipes - gulp repository 在 github 上分享的各種情況的實作 - 例如:統⼀一處理不同任務的錯誤訊息 30 • 研究其他⼤大⼤大的 gulpfile.js - google/web-starter-kit - g0v/g0v.tw • appleboy - Automating your workflow with Gulp.js
31.
31 THANK YOU
Descargar ahora