工具套件

在製作網頁的時候，都會引入許多的 JS 和 CSS，而每引入一個也就會產生一個 request，當引入的越來越多，在效能和時間的等待上也就相對付出的越來越多，雖然在對於現在的網路速度和瀏覽器效能而言，看似問題都不大，但是對於一個流量超大的網站來說，一個使用者多了一個 request，在效能的處理上就相對重要許多。

製作網頁的時候，往往至少會分成兩個階段，一個階段是「開發時期」的版本，一個階段是「發佈上線」的版本，最主要就是會把「開發」和「上線」分開，如此一來才不會一時疏忽把還沒開發好的版本給對外公開了。

在上線版本裡頭，就會使用到打包和壓縮過的 JS 或 CSS，這類型的 JS 或 CSS 會在檔案名稱加個「.min」進行區隔，而一個打包壓縮過的 JS 和 CSS，基本上可能是好幾個檔案組合在一起，過去我會利用 Yahoo 或 Google 提供的壓縮程式來處理，但許多步驟仍然要手工處理，但學習了 Gulp 之後，利用 Gulp 的套件，非常簡單的就可以做到打包壓縮的動作，甚至還可以自動重新命名檔案，一氣呵成，這篇主要會介紹如何打包壓縮的做法。

套件裡面會有：

工具

• gulp-concat：合併檔案
• gulp-uglify：混淆並壓縮 JS
• gulp-rename：重新命名檔案
• gulp-plumber：額外處理
• gulp-livereload：即時更新畫面
• gulp-clean：刪除舊有檔案
• gulp-watch：監看
• gulp-notify：處理通知

html

• gulp-html-extend：HTML 模板

JavaScript

• gulp-uglify：壓縮 javascript

CSS

• gulp-clean-css：壓縮 CSS
• gulp-sass：編譯 sass/scss 檔案
• gulp-sourcemaps：SASS可以在瀏覽器連結CSS
• gulp-autoprefixer：根據瀏覽器自動處理前綴

圖片相關

• gulp-imagemin：壓縮圖片
• gulp-cache：快取圖片，只有變更的圖檔才會壓縮處理
• gulp-responsive：生成不同尺寸的圖片