聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

十一月 2, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 自動修復 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 程式碼,讓程式碼可以遵守這些共同制定的標準。

Fixmyjs 的出現解決了 JSHint 的問題,但是大家會問 FixMyJS 幫我們解決了哪些問題,請看底下

  • 自動幫忙補上分號 semicolons
  • 強制轉換 camelCase
  • 幫忙移除 debugger 程式碼
  • 執行雙引號或單引號
  • 自動補上空白
  • Mixed spaces/tabs
  • 去除行尾空白
  • 自動轉換 array literal 和 object literal

更多支援請參考這裡,給個範例大家比較有感覺,可以看一下底下程式碼

var a = Array();
var b = Object();
var c = [];
var d
debugger;
delete c;
a == null;
var e = undefined;
var foo = new Foo;
foo([1, 2, 3,]);
a = 1;
a++;
var x = 1;;
a == NaN;
a != NaN
var q = .25;

透過 fixmyjs 指令轉換,可以得到底下結果

var a = [];
var b = {};
var c = [];
var d;
c = undefined;
a == null;
var e;
var foo = new Foo();
foo([
  1,
  2,
  3
]);
a = 1;
a++;
var x = 1;
isNaN(a);
!isNaN(a);
var q = 0.25;

透過命令列可以直接轉換 JavaScript 檔案

$ npm install fixmyjs -g
$ fixmyjs app.js

另外如果有使用 Sublime Text 編輯器可以直接找 sublime-fixmyjs,當然也可以透過 gulp-fixmyjs 來導入自動修復流程。gulp 可以參考底下

gulp.task 'jshint', ->
  gulp.src 'app/assets/js/**/*.js'
    .pipe $.fixmyjs
      legacy: true
    .pipe gulp.dest 'app/assets/js/'
    .pipe $.jshint()
    .pipe $.jshint.reporter 'jshint-stylish'
    .pipe $.if !browserSync.active, $.jshint.reporter 'fail'

如果你將 legacy 設定為 false,你會發現 JavaScript 的空白 Line 會被移除,這已經回報到官方 Issue,所以現在建議大家還是將 legacy 設定為 true 會比較好,否則程式碼會擠成一團 XD

更多介紹可以直接參考 Explorations In Automatically Fixing JavaScript Linting-errors

六月 12, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 用 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

此工具是透過 gpagespeed 完成,如果你有用 GruntJS 可以直接參考 grunt-pagespeed。使用 psi command line 非常簡單,透過底下指令就可以正確產生出上面報表

$ npm install -g psi
$ psi http://www.google.com

如果有用 GulpJS 可以寫成兩個 Task 來跑

var gulp = require('gulp');
var psi = require('psi');
var site = 'http://www.html5rocks.com';
var key = '';

// Please feel free to use the `nokey` option to try out PageSpeed
// Insights as part of your build process. For more frequent use,
// we recommend registering for your own API key. For more info:
// https://developers.google.com/speed/docs/insights/v1/getting_started

gulp.task('mobile', function (cb) {
  psi({
    // key: key
    nokey: 'true',
    url: site,
    strategy: 'mobile'
  }, cb);
});

gulp.task('desktop', function (cb) {
  psi({
    nokey: 'true',
    // key: key,
    url: site,
    strategy: 'desktop'
  }, cb);
});

上面程式碼來自 psi-gulp-sample,psi 有提供 callback function

function(err, data){
  console.log(data.score);
  console.log(data.responseCode);
  console.log(data.id );
}

上面的 Task 可以改成

gulp.task('desktop', function (cb) {
  psi({
    nokey: 'true',
    // key: key,
    url: site,
    strategy: 'desktop'
  }, function(err, data){
    console.log(data.score);
    console.log(data.responseCode);
    console.log(data.id );
    cb();
  });
});

用此工具來紀錄每次網站更新後的測試數據,對於調整 Web Performance 來說是一個可以參考的指標。如果 API 使用量很大,請記得申請 Google API Key。

五月 23, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Gulp.js 工具包

gulp

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

如果開發環境為 Apple Mac 你可以直接裝 @sindresorhus 寫的 gulp-app,或者是 g0v 作者 clkao 開發的 gullet。看大家喜歡哪些工具,請自行安裝。我比較推薦 Gulp Dev Tools for Chrome,可以在瀏覽器上直接執行 Gulp 所有 Task,如果之前有玩過 Grunt.js 大家應該都知道也有 Grunt Devtools

有使用 CoffeeScript 寫 Gulp.js 請務必在 gulpfile.coffee 加上

module.exports = gulp

接著修改 gulpfile.js 如下

require('coffee-script/register');
var gulp = require('./gulpfile.coffee');
module.exports = gulp;

程式碼可以直接參考 html5-template-engine

四月 29, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

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

$ wget http://downloads.sourceforge.net/project/optipng/OptiPNG/optipng-0.7.5/optipng-0.7.5.tar.gz
$ tar -zxvf optipng-0.7.5.tar.gz
$ cd optipng-0.7.5.tar
$ ./configure && make && make install

附上 gulp-imagemin 設定方式

gulp.task('images', function() {
  return gulp.src('app/images/**/*.{jpg,jpeg,png,gif}')
    .pipe(imagemin({
      progressive: true,
      interlaced: true
    }))
    .pipe(gulp.dest('dist/images'))
    .pipe(size());
});

三月 11, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 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 內直接寫

language: node_js
node_js:
    - "0.10"
before_install:
    - gem update --system
    - gem install sass
    - gem install compass
    - gem install susy
    - gem install modular-scale

這樣編譯出來的結果會噴底下錯誤訊息

/home/rof/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require’: cannot load such file — sass/script/node (LoadError) from /home/rof/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require’ from /home/rof/.rvm/gems/ruby-1.9.3-p327/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in `‘ from /home/rof/.rvm/rubies/ruby-1.9.3-p327/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require’

會造成這樣的原因就是目前 sass、compass、susy 都不能安裝最新版本。Compass 目前版本是 0.12.3 只有支援 Sass 3.2.14 版本,但是 Sass 前幾天剛推出 3.3.1 版本,另外 Susy 也是一樣問題,由於 Susy 推出 2.0.0 版本需要 Sass 3.3.0 版本以上才可以使用,所以針對 Compass 變成只能指定版本測試,否則會得到上述錯誤訊息,請將 .travis.yml 修正為

language: node_js
node_js:
    - "0.10"
before_install:
    - gem update --system
    - gem install sass --version 3.2.14
    - gem install compass --version 0.12.3
    - gem install susy --version 1.0.9
    - gem install modular-scale

這樣就可以正常跑出測試結果。

十二月 29, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 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 專案。

Gulp 簡介

大家可以把 Gulp 跟 Grunt 用途想成一樣,只是處理 Task 的原理不相同。Grunt 是透過 Task 的概念下去實作,JS 程式存檔後,Grunt 會依序處理使用者定義的 task,例如執行 jslint task 接著 uglify task,最後將檔案搬到您想的目錄。而 Gulp 則是平行處理,假設有5個 js 檔案,Gulp 則是透過 pipeline 方式處理檔案,所以 Gulp 會加速處理結果。

Grunt 原理:

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理5個檔案--- ->  ---處理5個檔案---   -> ---處理5個檔案---

Gulp 原理

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理檔案(1)--- ->  ---處理檔案(1)---  -> ---處理檔案(1)---
  ---處理檔案(2)--- ->  ---處理檔案(2)---  -> ---處理檔案(2)---
  ---處理檔案(3)--- ->  ---處理檔案(3)---  -> ---處理檔案(3)---
  ---處理檔案(4)--- ->  ---處理檔案(4)---  -> ---處理檔案(4)---
  ---處理檔案(5)--- ->  ---處理檔案(5)---  -> ---處理檔案(5)---

Gulp 用法

我們假設寫 Coffeescript 程式,通常寫完會經過 coffeelint 檢查 coffee script 的 Coding style 語法,最後才透過 coffee command 轉換成 javascript 檔案。

在 Grunt 套件,我們會這樣寫

coffeelint:
    options:
        'force': true
        'no_trailing_whitespace':
            'level': 'error'
        'max_line_length':
            'level': 'ignore'
        'indentation':
            'value': 4
            'level': 'error'
    dev: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**']
watch:
    coffee:
        files: ['**/*.coffee', '!**/node_modules/**', '!**/vendor/**'],
        tasks: ['coffeelint']

如果是用 Gulp 寫法會非常簡單

gulp.task('coffee', function() {
    gulp.src('app/assets/coffeescript/**/*.coffee')
        .pipe(coffeelint({"indentation": {
            "name": "indentation",
            "value": 4,
            "level": "error"
        }}))
        .pipe(coffeelint.reporter())
        .pipe(coffee({bare: true}))
        .pipe(gulp.dest('app/assets/js/'))
        .pipe(refresh(server));
});

有沒有變得很容易閱讀?設定方式也變得很容易,執行速度更不用說了,不會吃太多記憶體及 CPU 了,但是我覺得要取代 Grunt 實在很困難,Grunt 能處理大部分的事情,包含 Deploy 及驗證等等,我覺得 Gulp 就專門用在 RD 開發環境的建置,RD 平時會用到哪些套件?CoffscriptCompass or sasslivereloadwatch event,大致上這些就已經很足夠了。

由於沒找到 Compass Gulp plugin,只看到 sass plugin,所以我寫了簡易的 Gulp plugin,有用 compass 務必安裝

$ npm install gulp-compass --save-dev

使用方式可以參考 Readme

support:

biggo.com.tw

biggo.sg

A Django site.