iT邦幫忙

gulp相關文章
共有 84 則文章

技術 Gulp 升級4.0 DAY97

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

鐵人賽 Modern Web DAY 26

技術 [試著把切版專案升級到 gulp4.0 吧] Day26 JS 的處理:談 gulp-uglify

當我們把 JS 從 ES6+ 語法轉碼成 ES5 後,雖然解決了舊瀏覽器看不懂新語法的需求,但卻還有一個基本需求尚未解決:可不可以把檔案變得更小呢? 答案是可行...

技術 TypeScript 之 Gulp 報錯(Ans:降低版本的解決方法)

Target: ->解決您Gulp報錯的問題,照片如下。當你出現這問題時,代表您的Gulp版本過高。 Solution: 1.首先先到您的Package....

鐵人賽 Modern Web DAY 13

技術 [試著把切版專案升級到 gulp4.0 吧] Day13 第一個插件:以清除暫存為例,談 gullp 的插件黑名單

昨天提到,在 gulp 中使用清除檔案的插件時,我用的本來是 gulp clean,但現在換成了 npm 套件 del,這是因為重新 npm install 時...

鐵人賽 Modern Web DAY 11

技術 [試著把切版專案升級到 gulp4.0 吧] Day11 第一個插件:以清除暫存為例

在前端工程化的現在,實際放上遠端伺服器給使用者下載的網頁資料夾架構,其實並不等於開發者在本地端所開發的資料夾架構。因此,建構工具時常會臨時產生出一個 temp...

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

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

技術 Gulp bower(1) DAY85

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

技術 Gulp bower(2) DAY86

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 19

技術 Day 19 - 正式開發 Side project

Day 19 - 正式開發 Side project 每日一談 嗨,大家好 ! 我是阿蘇今天是 Day19 , 前面有分享很多開發前的切版知識、開發專題前的準...

技術 Gulp 基礎介紹 DAY79

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

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

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

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

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

技術 Gulp 基礎介紹 DAY78

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

技術 Gulp 與 Git DAY92

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

技術 Gulp browser-sync DAY87

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

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

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

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

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

技術 Gulp Babel ES6 編譯(1) DAY83

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

技術 Gulp 一鍵部屬到 Github Pages DAY93

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

技術 Gulp 圖片壓縮 DAY91

gulp-imageminhttps://www.npmjs.com/package/gulp-imagemin npm install gulp-ima...

技術 Gulp Babel ES6 編譯(2) DAY84

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