category: git

git hooks

on 2014-12-09

git hooks

和其他版本控制系統一樣，當某些重要事件發生時，Git 有方法可以觸發自訂腳本。有兩組掛鉤(hooks)：用戶端和伺服器端。用戶端掛鉤用於用戶端的操作，如提交和合併。伺服器端掛鉤用於 Git 伺服器端的操作，如接收被推送的提交。你可以為了各種不同的原因使用這些掛鉤，下面會講解其中一些。

git hooks 簡單的說就是在進行版本控管時可以再額外多做一些事

Refer - Git 客製化 - Git Hooks

在以前我們公司在前端開發上是用前輩大大寫好的 hook 做一些事 但前輩大大們陸續離開後, 架構又改了 新專案沒法用原有的 hook 所以只好跳進來寫 hook 了

可以用來幹嘛?

Client side

  • lint 檢查
  • coding style 檢查
  • 完善要推的 code
  • 做自動化測試
  • …

Server side

  • deploy code to production
  • auto build
  • …

打算用來幹嘛?

身為一隻前端攻城獅, 只要顧好 client side 就好了 預計完成

  • phpcs
  • jshint
  • image trans to png8 ?
  • multi-lang file check ?

Log

使用 pre-commit 在 commit 前檢查 使用 php 撰寫(基本上都可以指定用哪個程式語言寫 ex: php、ruby、python …)

#!/usr/bin/php
# first npm install -g jshint
# jshint

<?php
$error = false;
// $path = "~/miiitv_plus/";
$path = "";
exec("git diff --cached --name-only --diff-filter=ACM | grep '\.js'", $output_js, $return_var);
if (!empty($output_js))
{
    foreach ($output_js as $file) {
        $file_path = $path . $file;
        if (!empty(shell_exec("jshint " . $file_path . "")))
        {
            echo $file_path;
            echo "\n";
            echo "--------------------";
            echo "\n";
            echo shell_exec("jshint " . $file_path . "");
            echo "\n";
            echo "====================";
            $error = true;
        }
    }
}
# http://tedshd.logdown.com/posts/246406-php-install-phpcsphp-codesniffer
# phpcs
exec("git diff --cached --name-only --diff-filter=ACM | grep '\.php'", $output_php, $return_var);
if (!empty($output_php))
{
    foreach ($output_php as $file) {
        $file_path = $path . $file;
        if (!empty(shell_exec("phpcs " . $file_path . "")))
        {
            echo $file_path;
            echo "\n";
            echo "--------------------";
            echo "\n";
            echo shell_exec("phpcs " . $file_path . "");
            echo "\n";
            echo "====================";
            $error = true;
        }
    }
}
if ($error)
{
    exit(1);
}
else
{
    exit(0);
}
?>

不過使用 phpcs 會太悲催, 就跟用 jslint 一樣, 所以之後又請後端改成適合的 sniffer

Refer - hooks

Read more

Git - GitHub gh-pages

on 2014-08-16

Git - GitHub gh-pages

有時在 GitHub 上亂晃 常常發現一個問題就是有一些很有趣的前端實作, 或別人寫的一些功能沒有所謂的 demo page(當然有些是不需要 demo page) 我不知道是把 GitHub 當成備份的 codebase 或是覺得 demo 不重要所以沒放, 又或者是根本不知道要怎麼放 But 這都不重要 其實 GitHub 提供一個 gh-pages 的 branch(或者說是功能)可以讓我們這些前端攻城獅快速的建出個 demo page(但不包含後端功能)

如何使用?

1. 從 master 建出名為 gh-pages 的 branch

git branch gh-pages

螢幕快照_2014-08-17_上午12_51_52.png

2. 切到 gh-pahes 的 branch

git checkout gh-pages

螢幕快照_2014-08-17_上午12_51_53.png

3. 把 gh-pages git push 上 GitHub

git push

螢幕快照_2014-08-17_上午12_51_54.png

因為剛建出新的 branch, 該 branch 還未在 GitHub 上所以會提示你要用 git push --set-upstream origin gh-pages

4. 快樂的去 GitHub 拿網址

螢幕快照_2014-08-17_上午12_55_02.png

螢幕快照_2014-08-17_上午12_55_16.png

gh-pages 的 url 結構一律都是 http:// + <GitHub user name> + .github.io/ + <repository name>

5. 等等.. 網頁沒東西?

需注意的是該 url root 的 html 必須是 index.html 才會出預設的網頁, 其他的檔案路徑都是建立在該 url 上

6. Update

其實後續維護不太容易, 必須要熟悉 git 才知道要怎麼做 通常會在 master or 切出個 dev 來開發, 等開發完在 merge 所以在持續開發時, 要更新 demo page, 就必須要在 gh-pages merge 要更新的 branch

據說好像 grunt 還是 gulp 有套件可以自動 build, 但還沒試驗就是了

Read more