Gulp

前端工程師撰寫 JavaScript 程式碼後一定會透過 JSHint 驗證程式碼品質，但是 JSHint 只會提醒各位開發者哪些代碼需要修正，工程師還是需要手動去修復這些錯誤，這有點麻煩，所以今天來介紹一套自動修正 JSHint 錯誤的好工具 Fixmyjs，如果大家有寫過 PHP，一定有聽過 PHP-FIG 制定了 PSR-0, PSR-1, PSR-2 等標準，希望 PHP 工程師可以遵守這些規則，而 PHP-CS-Fixer 就是根據 PHP-FIG 來自動修復 PHP 程式碼，讓程式碼可以遵守這些共同制定的標準。

今年 2014 COSCUP 在 7/19,20 中研院舉辦，由於 JSDC 今年比往年還要晚半年舉辦，所以本來想投在 JSDC 的議程，就先拿到投到 COSCUP 議程。去年 JSDC 講了 Javascript command line tool GruntJS 介紹，講完經過半年，Gulp.js 就出來了，我馬上跳過去嘗試，用過之後，就像變了心的女朋友，回不來了，底下是 Gulp.js Slides。

相信工程師在調整網站效能一定會使用 Google PageSpeed Insights 來得到測試效能數據報表，但是這僅限於使用 Chrome 或 Firefox 瀏覽器。每次跑 PageSpeed 時候，Chrome 就會出現哀號，並且吃下許多記憶體。有沒有 command line 可以直接用 Google PageSpeed Insights 測試 Desktop 或 Mobile 的分數。Google 工程師 @addyosmani 寫了一套 PageSpeed Insights for Node - with reporting 稱作 PSI，可以直接透過 Node 來產生基本 report，這 report 真的算很基本，跟 Chrome 的 extension 跑起來的 report 是不一樣的。這工具可以用來紀錄每次 deploy 網站時的一些數據變化。底下附上 Google 網站報告

本篇來整理關於 Gulp.js 的一些 GUI 工具，對於不瞭解 Gulp.js 可以參考之前我寫的 The streaming build system Gulp，會紀錄這篇最主要是看到有人在 Github 發了這篇 Is there any GUI tool for Gulp? 而 Gulp.js 底層作者 @robrich 跳出來列出了很多工具，整理如下

在 deploy 程式碼到 production server 前，透過 gulp-imagemin 工具將全部圖片優化，上傳到 Amazon S3，Windows 底下正常運作，到了 Ubuntu 環境之下噴出底下錯誤訊息

Error: Lossy operations are not currently supported 後來在 grunt-contrib-imagemin@issues/180 有提人出此問題，解決方案就是升級 OptiPNG，因為 Ubuntu 的 apt 套件只有支援到 0.6.4 版本，請到 OptiPNG 官網下載最新 tar 檔，編譯重新安裝

Compass 是一套 CSS Authoring Framework，也是基於 Sass 語法的一套 Framework，先前寫了 Gulp 的 Compass Plugin，在針對自動化測試時候出現版本相依性不同，造成無法自動測試成功。自動化測試目前跟 Github 最常搭配的就是 Travis CI 或者是 Codeship，當然如果非 Open source 專案可能就要自己架設 CI 伺服器，個人推薦就是 Jenkins。這次遇到的問題其實跟 Ruby Gem 版本相依性有關，由於要測試 Compass 所有 Command 語法，所以使用了 Susy + sass + compass，如果在 .travis.yml 內直接寫

看到 Yeoman 作者之一 Addy Osmani 開始 review Gulp build system，由於 Yeoman framework 跟 GruntJS 是很緊密結合的，但是 GruntJS 套件愈來愈多，漸漸的執行 GruntJS 後，開始吃了系統 CPU 及記憶體，這對於開發環境而言，會是一大負擔阿，大家不知道有無發現，跑 Nodejs GruntJS 時，每當存檔的時候，CPU 就開始哀嚎了，我自己是有這方面的體會，加上團隊內並不是每位同仁的電腦都是很 powerful，原本是好意讓團隊開發更遵守 coding style 及統一開發環境，但是 Grunt 的肥大，讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 Gulp。也有考慮如何將 Gulp 整合到 Yeoman 專案。