自動修復 JavaScript Linting-errors 好工具 Fixmyjs

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

[Read More]

Automating your workflow with Gulp.js

gulp

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

[Read More]

用 Google PageSpeed Insights 計算 Desktop 或 Mobile 網站分數

new-google-logo-knockoff

相信工程師在調整網站效能一定會使用 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 網站報告

google_psi_report

[Read More]

gulp-imagemin 在 Ubuntu 出現錯誤

gulp

在 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 檔,編譯重新安裝

[Read More]

Ruby Compass and Sass Auto Testing Environment

Compass Home   Compass Documentation

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

[Read More]

The streaming build system Gulp

gulp

看到 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 專案。

[Read More]