iT邦幫忙

gulp相關文章
共有 82 則文章

技術 Gulp 直接將 watch, browserSync 加入任務函式中 DAY98

這裡要來先補充一下 確認任務的流程(3種) 加入 return (上篇有提到過) gulp.task('imageMin', function() {...

技術 Gulp 升級4.0 DAY97

由於前面我們都是使用 3.9.1版 來介紹 今天要來介紹 4.0 啦~~ gulp4.0 多了 parallel(同時執行) 與 series(依序執行) 且...

技術 Gulp 合併來自 npm 的 Javascript的資源 DAY96

在載入 bootstrap 的 js之前 我們可以看到 https://getbootstrap.com/docs/4.5/getting-started/in...

技術 Gulp 使用 includePaths 載入外部 Sass資源 DAY95

若我們要使用外部套件載入的 Sass 那要怎麼載入呢?? 這裡我們以 Bootstrap為例子 先使用 npm 的方式來載入 首先我們先砍掉 bower 載入的...

技術 Gulp npm install 中的 --save 與 --save-dev 差異 DAY94

npm install --save (產品用) npm install --save-dev (開發用) 以 Heroku 來說 它就無法使用 --save-...

技術 Gulp 一鍵部屬到 Github Pages DAY93

在介紹 gulp-gh-pages 之前 我們必須先在 GitHub 上新增一個遠端數據庫 點選 New repository 並在終端機 輸入 git re...

技術 Gulp 與 Git DAY92

在我們的資料夾內 只會將 source資料夾加入版控 這裡我們就來利用 git 來版控啦~~ 輸入 git init 利用 git status 來查看狀態...

技術 Gulp 圖片壓縮 DAY91

gulp-imagemin https://www.npmjs.com/package/gulp-imagemin npm install gulp-im...

技術 Gulp 釋出你的開發成品 DAY90

這裡先來介紹兩個套件 gulp-clean 與 gulp-sequence https://www.npmjs.com/package/gulp-clean h...

技術 Gulp 壓縮優化程式碼(2) DAY89

上一篇有介紹壓縮的一些套件了 不過有時候 我們在開發的時候 有時壓縮 有時不壓縮 那要怎麼解決 所以今天就來介紹 minimist 與 gulp-if 套件 h...

技術 Gulp 壓縮優化程式碼(1) DAY88

這裡我們先介紹 gulp-clean-css(壓縮css) 與 gulp-uglify(壓縮js) https://www.npmjs.com/package/...

技術 Gulp browser-sync DAY87

browser-sync 由於我們現在瀏覽網頁 是 file的路徑 這樣不太好 所以我們可以使用 browser-sync 解決此問題 https://brow...

技術 Gulp bower(2) DAY86

今天要來介紹 gulp 如何與 bower 結合 這裡必須新增一個套件 main-bower-files https://www.npmjs.com/packa...

技術 Gulp bower(1) DAY85

bower??? 什麼是 bower?? https://bower.io/ bower 為前端套件管理工具(ex: jQuery,Bootstrap) 這時...

技術 Gulp Babel ES6 編譯(2) DAY84

昨天我們已經介紹 babel編譯 與 concat合併成一支檔案 但我們還沒介紹 Source Map 的運用 不過在介紹 Source Map 之前 我們先在...

技術 Gulp Babel ES6 編譯(1) DAY83

Babel 為編譯 ES6 的工具 那我們就要開始介紹如何安裝與使用啦 https://www.npmjs.com/package/gulp-babel...

技術 Gulp 基礎介紹 gulp-load-plugins DAY82

由於我們前面每加入一個 插件(plugin) 就要引入一次 會發現其實超級麻煩 而且會顯得程式碼非常冗長 所以 gulp-load-plugins 可以解決此問...

技術 Gulp 基礎介紹 gulp-postcss 與 autoprefixer DAY81

這裡要來介紹如何優化 css 有時候我們因為要加前綴詞(有的舊瀏覽器不支援,所以需要加) 但這會浪費我們大量的時間在查詢資料 為了省時 我們可以加入 gulp-...

技術 Gulp 基礎介紹 gulp-sass DAY80

今天要來介紹 gulp-sass 如何安裝與使用 gulp-sass 介紹 https://www.npmjs.com/package/gulp-sass 安裝...

技術 Gulp 基礎介紹 DAY79

今天我們要先來介紹 Gulp 基本的四個 API 提供使用 gulp.task 執行工作 gulp.src 執行資料來源 guulp.dest 執行結果位置...

技術 Gulp 基礎介紹 DAY78

在介紹 gulp 之前 當然需要知道 gulp 它是什麼 簡單來說 gulp 就是 基於node.js的一個前端自動化構建工具 例:可以使用gulp對sass進...

鐵人賽 Modern Web DAY 28
前端建置工具完全手冊 系列 第 28

技術 Day 28: gulp 是怎麼運作的

要講到 gulp 怎麼運作的就不得不講到 vinyl 跟 Node.js 的 stream vinyl vinyl 是 gulp 用的虛擬的檔案格式,在它的 r...

鐵人賽 Modern Web DAY 27
前端建置工具完全手冊 系列 第 27

技術 Day 27 介紹 gulp

插播一下, webpack 5 出來了 gulp 是個老牌的 task runner ,它就只是執行設定好的工作,設定寫起來其實不難,不過現在前端大家主要還...

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等 2、具備跨終端的前端開...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] DAY 36 完賽心得

雖然在 2019.12.26 的時候就三十天完賽了,還不小心撿到個人組佳作,但我沒有什麼完賽的實感,因為覺得當時系列文還沒寫完。今天總算是勉強補完了 orz 這...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day35 佈署靜態網頁到 github pages

當網頁已經開發完成了,通常會想找個網路空間把網頁放上去,讓其他人輸入網址後就能在遠方看到網頁。網路雖然是自由的,但卻不是免費的,許多的網路空間都需要花錢錢才能使...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day34 邊開發邊看畫面變動:談 gulp-plumber

利用 gulp 來進行前端開發、執行預先定義好的 task 時,如果過程中有例外錯誤產生,原本正在 watch 檔案的執行程式會被中止。 不過,只要使用了 gu...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day33 邊開發邊看畫面變動:如何一鍵預覽畫面、生成靜態檔案

邊開發邊看畫面變動:如何一鍵預覽畫面、生成靜態檔案 在過去幾天,gulpfile 中已經建立了很多 gulp task 能供 cli 使用。像是 ejs tas...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day32 邊開發邊看畫面變動:談 browserSync

邊開發邊看畫面變動:談 browserSync 前端開發時除了看程式碼外,當然也會想看到目前的界面長得怎樣以便調整:即時的畫面回饋,能讓開發更方便。而 brow...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day31 邊開發邊看畫面變動:談 gulp.watch

邊開發邊看畫面變動:談 gulp.watch 想要達到邊開發邊看到畫面改動,有兩個比較重要的事情要做:一個是監控開發中的檔案是否有變動、另一個是建立一個暫時性的...