Gulp-使用 gulp-gh-pages 來一鍵發布靜態網頁到 github pages 上github 有提供一個免費的託管網頁服務叫做 github pages ,今天介紹如何透過 gulp-gh-pages 發布網頁上去。Oct 25, 2021Oct 25, 2021
Gulp-使用 browser-sync 來即時預覽畫面今天要介紹如何可以在執行 gulp 後生成開發的伺服器,並且當程式碼有變動時,可以即時的更新畫面。Oct 25, 2021Oct 25, 2021
Gulp-使用 default 來一鍵完成所有任務到目前為止,我們學會使用各種套件來幫助我們完成各式各樣的任務,但每個任務都需要打一次終端機的指令來完成,若我們能夠一鍵來完所有編譯任務並且開始監聽任務的變化就更好了!Oct 25, 2021Oct 25, 2021
Gulp — 如何使用 watch 監聽程式碼變化在使用 gulp 開發過程中,我們需要不斷的修改程式碼以及觀看結果畫面,但我們不可能每次修改後都手動去執行流程的自動化,因此我們需要讓 gulp 來監聽我們的程式碼變化自動編譯。Oct 21, 2021Oct 21, 2021
Gulp-使用 minimist 與 gulp-if 來依據開發環境調整輸出內容我們已經知道如何使用 Gulp 來編譯跟輸出檔案,也知道如何壓縮檔案,但一般我們在開發的過程其實輸出是不需要壓縮的,並且我們會希望保留console.log() 等等,等到生產環境才需要做全面的壓縮,因為壓縮等處理需要時間,會拖長編譯的時間。Oct 21, 2021Oct 21, 2021
Gulp-使用 gulp-babel 來將 ES6 語法轉換成瀏覽器兼容的語法吧在自行開發 JavaScript 時,我們常常會使用到 ES6 語法(如箭頭函式、let、const 等等) 來開發,但實際上一些較舊的瀏覽器可能沒辦法很好的支援它,需要透過一些方式來將它轉換為支援度較高的 ES5 語法,這時候我們就要使用到 gulp-babel 來處理。Oct 13, 2021Oct 13, 2021
Gulp-幫你的 css 加上 sourcemaps 吧我們已經成功將我們的 sass 編譯成瀏覽器能夠看得懂的 css 了,也替 css 加上能夠兼容新舊瀏覽器的前綴詞,但有時候我們會遇到一個問題,就是在 debug 一些前端樣式上的問題的時候 我們想要修改 css ,但因為我們是使用 sass…Oct 13, 2021Oct 13, 2021
Gulp- gulp-postcss 以及 autoprefixer上一篇我們介紹使用 gulp-sass 來將 sass 編譯為 css,但我們還需要讓編譯出來得 css 可以兼容各個瀏覽器,因此我們需要透過 gulp-postcss 以及 autoprefixer 套件來幫 css 增加前綴詞。Oct 8, 2021Oct 8, 2021