[筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼

這篇要筆記下的是讓前端開發時可以擺脫伺服器,達成編譯完後可以自動打開瀏覽器瀏覽,同時壓縮你的程式碼。
gulp logo


架設 WebService

1. 先安裝 BrowserSync ,並新增一個靜態的伺服器網址,指向你編譯出來的檔案資料夾 (如:/public)
2. 監控 .jade, .scss, .js 等等檔案,當有新編譯的結果時,會自動刷新網頁。
3. browser-sync 和 watch 要同步執行

編譯完成後,進行壓縮

1. 運用 gulp-clean-css 壓縮 Css、gulp-uglify 壓縮 javascript,將程式運行時不需要的縮排和空行給除去
2. 壓縮後的檔案,再存放到對應的資料夾。換言之,這串相關的指令碼多半會放在 gulp.dest(……) 的前面


程式碼


參考課程

Course 25 ~ Course 27 (全部一共有 48 Courses)

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。課程連結網址:http://tinyurl.com/y9fp69lb


相關文章

★全文分享★  [指南] 前端自動化開發 Gulp + PHP + Browserify
[指南] 前端自動化開發 Gulp + PHP + Browserify
雖說使用 Gulp 搭配 Browserify 可以成功在前
★全文分享★  [指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄
[指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄
最近因為工作上需要,重拾 Gulp 來作套件
★全文分享★  [筆記] HTML 與 PUG 線上格式轉換
[筆記] HTML 與 PUG 線上格式轉換
這篇筆記下網路上好用的 HTML 和 PUG 格式
★全文分享★  [筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版
[筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版
雖說用 pug 來進行排版算是很方便,不過
★全文分享★  [筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容
[筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容
這篇筆記下如何依照開發環境來調整佈署
★全文分享★  [筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接
[筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接
Gulp 搭配上 Bower 和 Bootstrap 4 前端套件,可
★全文分享★  [筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins
[筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins
這篇筆記下用 gulp-postcss、autoprefixer……等
★全文分享★  [筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案
[筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案
這篇筆記下用 Gulp 來編譯你的檔案,需要
★全文分享★  [筆記] 使用 Gulp 進行網頁前端自動化 – 簡介
[筆記] 使用 Gulp 進行網頁前端自動化 – 簡介
Gulp 是一個前端自動化工具。由於瀏覽器
按讚加入粉絲團

延伸閱讀