Design | Starck Lin

[Font] Brandon Text

Design — Tags: font — Posted by Starck on July 20, 2014

104031

104032

Brandon Text 是被設計用來搭配著名的 Brandon Grotesque 系列字體, 它擁有較高的基本高度 (x-height), 比起 Grotesque 來說更適合應用在字幅較長的段落和小尺寸的裝置螢幕。

Brandon Text is the companion of the famous Brandon Grotesque type family. It has a higher x-height than the Grotesque version and is optimized for long texts, small sizes and screens.

總共有六種不同粗細/字重 (weight) 和斜體的無襯線字型是在 2012 年由 Hannes von Döhren 所設計的。

This sans serif type family of six weights plus matching italics was designed by Hannes von Döhren in 2012.

brandon-text

受到在20到30年代間很流行的無襯線幾何造形風格的影響，這種幾何形狀的字體在閱讀上能有更好的視覺辨識性與易讀性。Brandon Text 看起來相當舒服，並可與 Brandon Grotesque 可以完美的搭配在一起。為了在螢幕的呈現而作了許多微調和優化所以把它運用在網站、電子書與應用程式上是個不錯的選擇。

Influenced by the geometric-style sans serif faces that were popular during the 1920s and 30s, the fonts are based on geometric forms that have been optically corrected for better legibility. Brandon Text has a functional look with a warm touch and works perfectly together with Brandon Grotesque. It is manually hinted and optimized for screens, so it will be a good choice for Websites, eBooks or Apps.

The whole Brandon series is equipped for complex, professional typography with different sets of numbers, alternate letters, fractions and an extended character set to support Central and Eastern European as well as Western European Languages.

Comments (0)

Pixel Art

Design — Tags: Pixel Art — Posted by Starck on July 4, 2014

little prince

maskman

Comments (0)

Bootflat – an opensource Flat UI Kit based on Bootstrap 3.1.1

Design — Posted by Starck on April 12, 2014

Site

繼 Designmodo 的 Flat UI 後，又一個不錯的 CSS Framework。

Source

PSD files

Comments (0)

Sigma Global Website

Design — Tags: Web Design — Posted by Starck on January 10, 2014

SIGMA_GLOBAL_VISION-2-2

Lens___SIGMA_GLOBAL_VISION-3

Contemporary___SIGMA_17-70mm_F2_8-4_DC_MACRO_OS_HSM___SIGMA_GLOBAL_VISION-3

Concept___SIGMA_GLOBAL_VISION-3

Contemporary___SIGMA_17-70mm_F2_8-4_DC_MACRO_OS_HSM___SIGMA_GLOBAL_VISION-3 2

www.sigma-global.com

Comments (0)

JIU-KUI Liquor Store Identity Design

Design — Tags: Graphic Design — Posted by Starck on October 2, 2013

jiukui

Design by Starck Lin

Comments (0)

Inanna Identity Design

Design — Tags: Graphic Design — Posted by Starck on October 2, 2013

inanna

Design by Starck Lin

Comments (0)

SOLID principles

Coding, Design — Tags: Laravel, Thinking — Posted by Starck on October 1, 2013

The SOLID design principles, articulated by Robert “Uncle Bob” Martin, are five principles that provide a good foundation for sound application design. The five principles are:

S (Single Responsibility Principle)
O (Open/Closed Principle)
L (Liskov Substitution Principle)
I (Interface Segregation Principle)
D (Dependency Inversion Principle)

Single Responsibility Principle

A class (or unit of code) should have one responsibility.

設計一個類別，所有的實作應只為用來解決一個特定意圖（需求）而如果為了解決這個需求，而延伸出其它的需求與實作，應該把這些工作交給其它類別。

// MVC
class Controller {}
class Model {}
class View {}

// In this case, we want to validate something before storing it.
// Don't try to validate anything directly in Controller, Model or View ...etc. It will make them dirty.
// Just make Validation class and use it in those classes.
class Validation {}

// MVC

class Controller {}

class Model {}

class View {}

// In this case, we want to validate something before storing it.

// Don't try to validate anything directly in Controller, Model or View ...etc. It will make them dirty.

// Just make Validation class and use it in those classes.

class Validation {}

Open/Closed Principle

A class should be open for extension but closed for modification. You can extend a class or implement and interface, but you should not be able to modify a class directly. This means you should extend a class and use the new extension rather than change a class directly. Additionally, this means setting class attributes and methods as private or protected properly so they cannot be modified by external code.

一個類別應能被很有彈性地擴充，而不是直接修改其自身來解決新的意圖（需求）。以此原則來決定這個類別的屬性和方法該怎麼被限制，或該開放什麼？

ValidationModel

class ValidationModel {

    protected $rules;
    protected $messages;
    
    private $fields;
    private $validator;

    public function __construct( array $attributes = array() ) {
        $this->fields = $attributes;
    }

    public function passes() {
        
        $this->validator = Validator::make( $this->rules, $this->fields, $this->messages );
        if( $this->validator->isFail() ) {
            return $this->validator->messages()->first();
        }
        return true;

    }

}

class LoginValidationModel extends ValidationModel {
    protected $rules = array(
        'id'      => 'required|min:5',
        'password'    => 'required|min:8'
    );
    protected $messages = array(
        'id.required'     => 'ID is required for login.',
        'id.min'      => 'ID must be at least five characters.'
    );
}

class RegisterValidationModel extends ValidationModel {
    // ...
}

class ValidationModel {

protected $rules;

protected $messages;

private $fields;

private $validator;

public function __construct( array $attributes = array() ) {

$this->fields = $attributes;

}

public function passes() {

$this->validator = Validator::make( $this->rules, $this->fields, $this->messages );

if( $this->validator->isFail() ) {

return $this->validator->messages()->first();

}

return true;

}

class LoginValidationModel extends ValidationModel {

protected $rules = array(

'id' => 'required|min:5',

'password' => 'required|min:8'

);

protected $messages = array(

'id.required' => 'ID is required for login.',

'id.min' => 'ID must be at least five characters.'

);

}

class RegisterValidationModel extends ValidationModel {

// ...

}

Liskov Substitution Principle

Objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program. In PHP, this often means creating interfaces for your code to implement. You can then change (switch-out) implementations of the interfaces, Doing so should be possible without having to change how your application code interacts with the implementation. The interface serves as a contract, guaranteeing that certain methods will be available.

每當我們在一個類別引用了其它類別時，多思考如何往後如何切換或取代這件事，之後如果不用到它，會有什麼影響？如何讓更換這件事不費力？經驗上，我們往往會遇到一些被設計用來解決相同需求(購物這個需求)，但有各自實作方式(Paypal, Stripe …等支付方法)的情況，我們可以利用界面(interface)，定義一個大家共同遵循的規範(我們都應該有購買這個行為)，這個概念如同讓這些類別簽定了一個契約(Contract)，以確保都將一定會實行哪些行為。如此，我們只要專注那些行為在流程上的安排，不管現在這個實行的對象為何都不致於讓流程出錯，甚致隨時可以將其取代成別的也簽定契約的類別。

LiskovSubstitution

interface FileInterface {
    public function setName( $name = '' );
    public function getName();
    public function setDescription( $description = '' );
    public function getDescription();
}
interface DiskInterface {
    public function connect( ProtocolInterface $protocol );
    public function save( FileInterface $file );
}
interface ProtocolInterface {
    public function save( FileInterface $file );
}

class UsbProtocol implements ProtocolInterface {
    public function save( FileInterface $file) {
        $file->setDescription( $file->getName(). ' was saved via usb protocol.');
    }
}

class ThumderboltProtocol implements ProtocolInterface {
    public function save( FileInterface $file) {
        $file->setDescription( $file->getName(). ' was saved via thumderbolt protocol.');
    }
}

class Disk implements DiskInterface {
    protected $protocol;
    public function connect( ProtocolInterface $protocol ) {
        $this->protocol = $protocol;
    }
    public function save( FileInterface $file ) {
        $this->protocol->save( $file );
    }
}

class File implements FileInterface {
    protected $filename = 'undefined';
    protected $ext = '';
    protected $description = '';
    public function __construct() {
        $this->filename = $this->filename.$this->ext;
    }
    public function setName( $name = '' ) {
        $this->filename = $name . $this->ext;
    }
    public function getName() {
        return $this->filename;
    }
    public function setDescription( $description = '' ) {
        $this->description = $description;
    }
    public function getDescription() {
        return $this->description;
    }
}

class DocFile extends File {
    protected $ext = '.docx';
}
class ExcelFile extends File {
    protected $ext = '.xls';
}

$disk = new Disk();
$disk->connect( new ThumderboltProtocol );
$file  = new DocFile();
$disk->save( $file );

interface FileInterface {

public function setName( $name = '' );

public function getName();

public function setDescription( $description = '' );

public function getDescription();

}

interface DiskInterface {

public function connect( ProtocolInterface $protocol );

public function save( FileInterface $file );

}

interface ProtocolInterface {

public function save( FileInterface $file );

}

class UsbProtocol implements ProtocolInterface {

public function save( FileInterface $file) {

$file->setDescription( $file->getName(). ' was saved via usb protocol.');

}

class ThumderboltProtocol implements ProtocolInterface {

public function save( FileInterface $file) {

$file->setDescription( $file->getName(). ' was saved via thumderbolt protocol.');

}

class Disk implements DiskInterface {

protected $protocol;

public function connect( ProtocolInterface $protocol ) {

$this->protocol = $protocol;

}

public function save( FileInterface $file ) {

$this->protocol->save( $file );

}

class File implements FileInterface {

protected $filename = 'undefined';

protected $ext = '';

protected $description = '';

public function __construct() {

$this->filename = $this->filename.$this->ext;

}

public function setName( $name = '' ) {

$this->filename = $name . $this->ext;

}

public function getName() {

return $this->filename;

}

public function setDescription( $description = '' ) {

$this->description = $description;

}

public function getDescription() {

return $this->description;

}

class DocFile extends File {

protected $ext = '.docx';

}

class ExcelFile extends File {

protected $ext = '.xls';

}

$disk = new Disk();

$disk->connect( new ThumderboltProtocol );

$file = new DocFile();

$disk->save( $file );

Interface Segregation Principle

Many client-specific interfaces are better than one general-purpose interface. In general, it’s preferable to create an interface and implement it many times over than create a general-purpose class which attempts to work in all situations.

因為在程式語言中，一旦行為(method)在界面(interface)中被定義，在類別中就要嚴格地去實作。所以應該避免用一個很概廓性的界面讓類別去實作很多不必要的行為。就設計的角度來看，就是思考如何拆分行為的關連性這件事。

interface isFlyable() {
    public function fly();
}
interface isWalkable() {
    public function walk();
}
interface isSwimable() {
    public function swim();
}

class Starck implements isWalkable {
    public function walk() {}
}
class Pigeon implements isFlyable, isWalkable {
    public function fly() {}
    public function walk() {}
}
class Jessie implements isWalkable, isSwimable {
    public function walk() {}
    public function swim() {}
}

interface isFlyable() {

public function fly();

}

interface isWalkable() {

public function walk();

}

interface isSwimable() {

public function swim();

}

class Starck implements isWalkable {

public function walk() {}

}

class Pigeon implements isFlyable, isWalkable {

public function fly() {}

public function walk() {}

}

class Jessie implements isWalkable, isSwimable {

public function walk() {}

public function swim() {}

}

Dependency Inversion Principle

One should depend upon abstractions rather than concrete classes. You should define class dependencies as an interface rather than a concrete class. This allows you to switch an implementation of the interface out without having to change the class using the dependency.

This principle states that high-level code should not depend on low-level code, and that abstractions should not depend upon details.

依賴界面的關係比依賴類別來得更好，目的是希望在一個系統中元件之間相互依賴的程度（耦合性）盡可能的降低，以避免牽一髮動全身的情況發生。以這個原則來說，最常見的情況，就是該怎麼設計如何切換資料來源的機制。資料的存取可能是在 MySQL, NoSQL, 甚至是 Memory，我們如何在不影響主程式太多的情況下改變來源?

舉例來說

class DbMysql {
    public function getAll( $target ) { ... }
}
class Me {
  public fuunction getAllUsersFromMySql() {
      $db = new DbMysql;
      return $db->getAll('user');
  }
}
$me = new Me;
$me->getAllUsersFromMySql();

class DbMysql {

public function getAll( $target ) { ... }

}

class Me {

public fuunction getAllUsersFromMySql() {

$db = new DbMysql;

return $db->getAll('user');

}

$me = new Me;

$me->getAllUsersFromMySql();

這段程式大概是長得像這樣的句子：

「我要去MySQL檔案庫查詢使用者名單」。

這是一個耦合性高的句子，意即我們想要稍微改變一下行為，整個「」裡的文字都要變動，所以我們稍微調整一下：

我要去 MySQL 檔案庫「查詢使用者名單」。

MySQL 檔案庫為 來源地, 而 查詢使用者名單 為動作。

class DbMysql {
    public function getAll( $target ) { ... }
}
class Me {
  public fuunction getAllUsersFrom(DbMysql $db) {
      return $db->getAll('user');
  }
}
$me = new Me;
$me->getAllUsersFrom( new DbMysql );

class DbMysql {

public function getAll( $target ) { ... }

}

class Me {

public fuunction getAllUsersFrom(DbMysql $db) {

return $db->getAll('user');

}

$me = new Me;

$me->getAllUsersFrom( new DbMysql );

雖然我把來源地區隔開來，但實際上如果我改去 NoSQL 檔案庫，那麼這個句子還是會出錯，因為我們明確指出我們要到 MySql 檔案庫，該用什麼句子來表達才不會有問題呢？

答案是使用統稱：「我」要去「檔案庫」「查詢使用者名單」。

interface RepositoryInterface {
    public getAll( $target );
}
class MySqlRepository implements RepositoryInterface {
    public getAll( $target ) { ... }
}
class NoSqlRepository implements RepositoryInterface {
    public getAll( $target ) { ... }
}
class Me {
  public function getAllUsersFrom( RepositoryInterface $repository ) {
      return $repository->getAll('user');
  }
}
$me = new Me;
// MySql
$me->getAllUsersFrom( new MySqlRepository );
// NoSql
$me->getAllUsersFrom( new NoSqlRepository );

interface RepositoryInterface {

public getAll( $target );

}

class MySqlRepository implements RepositoryInterface {

public getAll( $target ) { ... }

}

class NoSqlRepository implements RepositoryInterface {

public getAll( $target ) { ... }

}

class Me {

public function getAllUsersFrom( RepositoryInterface $repository ) {

return $repository->getAll('user');

}

$me = new Me;

// MySql

$me->getAllUsersFrom( new MySqlRepository );

// NoSql

$me->getAllUsersFrom( new NoSqlRepository );

白話一點就是叫我們講話講得愈模糊愈好，就像是如果我跟一個以上的女朋友同時在交往，每一位打電話來我都叫她「親愛的」，這樣就可以避免叫錯人的情況啦。

interface UserInterface {
    public function all() {};
}

class EloquentUserRepository implements UserInterface {
    public function all() {
        return User::all()->toArray();
    }
}

class DbUserRepository implements UserInterface {
    public function all() {
        return DB::table('users')->get();
    }
}

class MemoryUserRepository implements UserInterface {
    public function all() {
        return Mem::key('users')->getAll();
    }
}

class BaseController { portected $users; }
class Controller extends BaseController {
    public function __construct( UserInterface $users ) {
        $this->users = $users;
    }
    public function getUsers() {
        $this->users->all();
    }
}

// get all users via Eloquent Model
$controller = new Controller( new EloquentUserRepository );
// get all users via Database Query Builder
$controller = new Controller( new DbUserRepository );
// get all users from memory
$controller = new Controller( new MemoryUserRepository );

// in laravel, you can use App::bind for switching dependencies at runtime
App::bind( 'UserInterface', function() {
    return new EloquentUserRepository( ... );
});

interface UserInterface {

public function all() {};

}

class EloquentUserRepository implements UserInterface {

public function all() {

return User::all()->toArray();

}

class DbUserRepository implements UserInterface {

public function all() {

return DB::table('users')->get();

}

class MemoryUserRepository implements UserInterface {

public function all() {

return Mem::key('users')->getAll();

}

class BaseController { portected $users; }

class Controller extends BaseController {

public function __construct( UserInterface $users ) {

$this->users = $users;

}

public function getUsers() {

$this->users->all();

}

// get all users via Eloquent Model

$controller = new Controller( new EloquentUserRepository );

// get all users via Database Query Builder

$controller = new Controller( new DbUserRepository );

// get all users from memory

$controller = new Controller( new MemoryUserRepository );

// in laravel, you can use App::bind for switching dependencies at runtime

App::bind( 'UserInterface', function() {

return new EloquentUserRepository( ... );

});

interface PaymentInterface {
    public function checkout();
}

interface PaymentPaypalInterface extends PaymentInterface {};
interface PaymentStripeInterface extends PaymentInterface {};


class PaymentController extends BaseController {
    protected $payment;
}

class PaypalPaymentController extends PaymentController {

    public function __construct( PaymentPaypalInterface $payment) {
        $this->payment = $payment;
    }
}

class StripPaymentController extends PaymentController {

    public function __construct( PaymentStripeInterface $payment) {
        $this->payment = $payment;
    }

}

class DynPaymentController extends PaymentController {
    public function __construct( PaymentInterface $payment ) {
        $this->payment = $payment;
    }
}

class PaypalPayment implements PaymentInterface {
    public $name = 'paypal';
    public function checkout() { return 'paypal checkout'; }
}
class StripePayment implements PaymentInterface {
    public $name = 'stripe';
    public function checkout() { return 'stripe checkout'; }
}

App::bind('PaypalRepository', 'PaypalPayment');
App::bind('StripeRepository', 'StripePayment');

App::bind('PaymentPaypalInterface', function() {

    // ...
    return new PaypalRepository();

});

App::bind('PaymentStripeInterface', function() {

    // ...
    return new StripeRepository();

});

App::bind('PaymentInterface', function() {

    $user = User::find(1);

    if( $user->payment == 'paypal' ) {

        return App::make('PaymentPaypalInterface');

    }else{

        return App::make('PaymentStripeInterface');

    }

});

interface PaymentInterface {

public function checkout();

}

interface PaymentPaypalInterface extends PaymentInterface {};

interface PaymentStripeInterface extends PaymentInterface {};

class PaymentController extends BaseController {

protected $payment;

}

class PaypalPaymentController extends PaymentController {

public function __construct( PaymentPaypalInterface $payment) {

$this->payment = $payment;

}

class StripPaymentController extends PaymentController {

public function __construct( PaymentStripeInterface $payment) {

$this->payment = $payment;

}

class DynPaymentController extends PaymentController {

public function __construct( PaymentInterface $payment ) {

$this->payment = $payment;

}

class PaypalPayment implements PaymentInterface {

public $name = 'paypal';

public function checkout() { return 'paypal checkout'; }

}

class StripePayment implements PaymentInterface {

public $name = 'stripe';

public function checkout() { return 'stripe checkout'; }

}

App::bind('PaypalRepository', 'PaypalPayment');

App::bind('StripeRepository', 'StripePayment');

App::bind('PaymentPaypalInterface', function() {

// ...

return new PaypalRepository();

});

App::bind('PaymentStripeInterface', function() {

// ...

return new StripeRepository();

});

App::bind('PaymentInterface', function() {

$user = User::find(1);

if( $user->payment == 'paypal' ) {

return App::make('PaymentPaypalInterface');

}else{

return App::make('PaymentStripeInterface');

}

});

<?php namespace Database;

class Database
{
    protected $adapter;

    public function __construct(AdapterInterface $adapter)
    {
        $this->adapter = $adapter;
    }
}

interface AdapterInterface {}
 
class MysqlAdapter implements AdapterInterface {}

<?php namespace Database;

class Database

{

protected $adapter;

public function __construct(AdapterInterface $adapter)

{

$this->adapter = $adapter;

}

interface AdapterInterface {}

class MysqlAdapter implements AdapterInterface {}

Comments (0)

A Solution for Cross Browser Testing

Design — Tags: IE, Testing — Posted by Starck on August 25, 2013

Cross-browser-testing

It’s always a disturbing issue for testing IE browser between different versions, but I found a good solution from Microsoft:

Download IE VMs

Comments (0)

Print and Bound Books

Design — Posted by Starck on August 22, 2013

etsy on livestream.com. Broadcast Live Free

Comments (0)

Guard is My Best Friend

Coding, Design — Tags: Guard — Posted by Starck on June 24, 2013

Guardfile 語法說明

guard :<plugin> : 使用 plugin
group :<group name> … end : 定義一個 task 分類區塊
%w[] : Ruby 宣告 Array 的方式, 用空白區分
:key => value : 宣告 Hashes 的 key/value
%r{} : Regexen 正規表達式, 可到 rubular 測試

Ruby語法參考, Guard語法參考

Group

example:

group :tb2 do
    guard :concat, 
        :type => 'css', :files = > %w[boostrap bootstrap-responsive], 
        :input_dir => 'app/assets/css,
        :output => 'public/css/bootstrap.css
end

group :zf4 do
    guard :concat, 
        :type => 'css', :files = > %w[normalize foundation4], 
        :input_dir => 'app/assets/css,
        :output => 'public/css/foundation.css
end

group :tb2 do

guard :concat,

:type => 'css', :files = > %w[boostrap bootstrap-responsive],

:input_dir => 'app/assets/css,

:output => 'public/css/bootstrap.css

end

group :zf4 do

guard :concat,

:type => 'css', :files = > %w[normalize foundation4],

:input_dir => 'app/assets/css,

:output => 'public/css/foundation.css

end

Plugins

CoffeeScript

guard-coffeescript

編譯 CoffeeScript

input : .coffee 路徑
output : .javascript 輸出路徑

example:

guard :coffeescript, 
    :input => "app/assets/coffee", 
    :output => "public/js"

guard :coffeescript,

:input => "app/assets/coffee",

:output => "public/js"

Concat

guard-concat

合併檔案

type : 檔案類型 (副檔名), ex: css, js…
files : 哪些檔案要被合併, 用 Array 的方式定義
input_dir : 來源路徑
output : 合併後的檔案 (去除.副檔名)

example:

guard :concat, 
    :type => "css", 
    :files => %w[bootstrap-responsive bootstrap button], 
    :input_dir => "public/css", 
    :output => "public/css/styles.min"

guard :concat,

:type => "css",

:files => %w[bootstrap-responsive bootstrap button],

:input_dir => "public/css",

:output => "public/css/styles.min"

# This will concatenate the javascript files a.js and b.js in public/js to all.js
guard :concat, type: "js", files: %w(b a), input_dir: "public/js", output: "public/js/all"

# analog css example
guard :concat, type: "css", files: %w(c d), input_dir: "public/css", output: "public/css/all"

# js example with *

guard :concat, type: "js", files: %w(vendor/* b a), input_dir: "public/js", output: "public/js/all"
# will concatenate all files in the vendor dir, then b then a (watch out of dependencies)

# This will concatenate the javascript files a.js and b.js in public/js to all.js

guard :concat, type: "js", files: %w(b a), input_dir: "public/js", output: "public/js/all"

# analog css example

guard :concat, type: "css", files: %w(c d), input_dir: "public/css", output: "public/css/all"

# js example with *

guard :concat, type: "js", files: %w(vendor/* b a), input_dir: "public/js", output: "public/js/all"

# will concatenate all files in the vendor dir, then b then a (watch out of dependencies)

Livereload

guard-livereload

Blocks/Closures
watch : 偵測什麼的檔案變化, 可以用 %r 正規表達式

example:

# .+       任意字元
# (?<!)    zero-width negative look-behind assertion.
# (?<!\.min\.(css|html|js|blade\.php)$)
# 不包含 .min 文字但以 css 或 html 或 js 或 blade.php 結尾

guard 'livereload' do
    watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

# .+ 任意字元

# (?<!) zero-width negative look-behind assertion.

# (?<!\.min\.(css|html|js|blade\.php)$)

# 不包含 .min 文字但以 css 或 html 或 js 或 blade.php 結尾

guard 'livereload' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

可用參數:

:host => '127.3.3.1'     # default '0.0.0.0'
:port => '12345'         # default '35729'
:apply_css_live => false # default true
:override_url => false   # default false
:grace_period => 0.5     # default 0 (seconds)

:host => '127.3.3.1' # default '0.0.0.0'

:port => '12345' # default '35729'

:apply_css_live => false # default true

:override_url => false # default false

:grace_period => 0.5 # default 0 (seconds)

example:

guard 'livereload', :host => '127.3.3.1', :port => '12345' do
    watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

guard 'livereload', :host => '127.3.3.1', :port => '12345' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

Minify

cssmin
jsmin

example:

min_js = 'public/js/bootstrap.min.js'
watch 'public/js/bootstrap.js' do |m|
  js = File.read(m[0])
  File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }
  puts min_js + " has minify."
end

min_js = 'public/js/bootstrap.min.js'

watch 'public/js/bootstrap.js' do |m|

js = File.read(m[0])

File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }

puts min_js + " has minify."

end

watch('public/css/styles.min.css') do |m|
    css = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }
end
watch('public/js/scripts.min.js') do |m|
    js = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }
end

watch('public/css/styles.min.css') do |m|

css = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }

end

watch('public/js/scripts.min.js') do |m|

js = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }

end

PHP Unit Testing

# 
# PHP Unit Testing
# 
guard :shell, :all_on_start => false do
  watch(%r{^app/tests/.+Test\.php$}) { `phpunit` }
end

# PHP Unit Testing

guard :shell, :all_on_start => false do

watch(%r{^app/tests/.+Test\.php$}) { `phpunit` }

end

參考完整 Guardfile 範例

Laravel-Guard Example:

guard :coffeescript, :input => "app/assets/coffee", :output => "public/js"

guard :concat, :type => "css", :files => %w[bootstrap-responsive bootstrap button], :input_dir => "public/css", :output => "public/css/styles.min"

guard :concat, :type => "js", :files => %w[bootstrap], :input_dir => "public/js", :output => "public/js/scripts.min"

# Refresh the browser on save
guard 'livereload' do
  watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do
  # Run any test in app/tests upon save.
  watch(%r{^.+Test\.php$})

  # When a view file is updated, run tests.
  # Tip: you probably only want to run your integration tests.
  watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

  # When a file is edited, try to run its associated test.
  # Save app/models/User.php, and it will run app/tests/models/UserTest.php
  watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}
end

module ::Guard
  class Refresher < Guard
    def run_all
      # refresh
    end

    def run_on_additions(paths)
      refresh
    end

    def run_on_removals(paths)
      refresh
    end

    def refresh
      `php artisan guard:refresh`
    end
  end
end

require 'cssmin'
require 'jsmin'

guard :refresher do
  watch(%r[public/js/.+])
  watch(%r[public/css/.+])
  watch(%r{app/config/packages/way/guard-laravel/guard.php}) do |m|
    `php artisan guard:refresh`
  end
  watch('public/css/styles.min.css') do |m|
    css = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }
  end
  watch('public/js/scripts.min.js') do |m|
    js = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }
  end
end

guard :sass, :input => 'app/assets/sass', :output => 'public/css'

guard :coffeescript, :input => "app/assets/coffee", :output => "public/js"

guard :concat, :type => "css", :files => %w[bootstrap-responsive bootstrap button], :input_dir => "public/css", :output => "public/css/styles.min"

guard :concat, :type => "js", :files => %w[bootstrap], :input_dir => "public/js", :output => "public/js/scripts.min"

# Refresh the browser on save

guard 'livereload' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do

# Run any test in app/tests upon save.

watch(%r{^.+Test\.php$})

# When a view file is updated, run tests.

# Tip: you probably only want to run your integration tests.

watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

# When a file is edited, try to run its associated test.

# Save app/models/User.php, and it will run app/tests/models/UserTest.php

watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}

end

module ::Guard

class Refresher < Guard

def run_all

# refresh

end

def run_on_additions(paths)

refresh

end

def run_on_removals(paths)

refresh

end

def refresh

`php artisan guard:refresh`

end

require 'cssmin'

require 'jsmin'

guard :refresher do

watch(%r[public/js/.+])

watch(%r[public/css/.+])

watch(%r{app/config/packages/way/guard-laravel/guard.php}) do |m|

`php artisan guard:refresh`

end

watch('public/css/styles.min.css') do |m|

css = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }

end

watch('public/js/scripts.min.js') do |m|

js = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }

end

guard :sass, :input => 'app/assets/sass', :output => 'public/css'

My Laravel Example :

require 'cssmin'
require 'jsmin'

group :tb2 do

  all_js = 'bootstrap.all'
  all_css = 'bootstrap.all'

  min_js = 'public/js/bootstrap.min.js'
  min_css = 'public/css/bootstrap.min.css'

  # Compile CoffeeScript
  guard :coffeescript, :input => "app/assets/coffee", :output => "app/assets/js"

  # Compile SASS
  guard :sass, :input => 'app/assets/sass', :output => 'app/assets/css'

  # Concat CSS
  guard :concat, :type => "css", :files => %w[bootstrap bootstrap-responsive button], :input_dir => "app/assets/css", :output => "public/css/" + all_css

  # Concat JS
  guard :concat, :type => "js", :files => %w[jquery.1.9.1 bootstrap jqBootstrapValidation], :input_dir => "app/assets/js", :output => "public/js/" + all_js

  # 
  # Minify JS
  # 
  watch 'public/js/'+ all_js +'.js' do |m|
    js = File.read(m[0])
    File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }
    puts min_js + " has minify."
  end

  # 
  # Minify CSS
  # 
  watch 'public/css/'+ all_css +'.css' do |m|
    css = File.read(m[0])
    File.open(min_css, 'w') { |file| file.write(CSSMin.minify(css)) }
    puts min_css + " has minify."
  end

end

# 
# Live Reload
# 

guard 'livereload' do
  watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

# 
# PHP Unit Testing
# 

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do
  # Run any test in app/tests upon save.
  watch(%r{^.+Test\.php$})

  # When a view file is updated, run tests.
  # Tip: you probably only want to run your integration tests.
  watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

  # When a file is edited, try to run its associated test.
  # Save app/models/User.php, and it will run app/tests/models/UserTest.php
  watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}
end

require 'cssmin'

require 'jsmin'

group :tb2 do

all_js = 'bootstrap.all'

all_css = 'bootstrap.all'

min_js = 'public/js/bootstrap.min.js'

min_css = 'public/css/bootstrap.min.css'

# Compile CoffeeScript

guard :coffeescript, :input => "app/assets/coffee", :output => "app/assets/js"

# Compile SASS

guard :sass, :input => 'app/assets/sass', :output => 'app/assets/css'

# Concat CSS

guard :concat, :type => "css", :files => %w[bootstrap bootstrap-responsive button], :input_dir => "app/assets/css", :output => "public/css/" + all_css

# Concat JS

guard :concat, :type => "js", :files => %w[jquery.1.9.1 bootstrap jqBootstrapValidation], :input_dir => "app/assets/js", :output => "public/js/" + all_js

# Minify JS

watch 'public/js/'+ all_js +'.js' do |m|

js = File.read(m[0])

File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }

puts min_js + " has minify."

end

# Minify CSS

watch 'public/css/'+ all_css +'.css' do |m|

css = File.read(m[0])

File.open(min_css, 'w') { |file| file.write(CSSMin.minify(css)) }

puts min_css + " has minify."

end

# Live Reload

guard 'livereload' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

# PHP Unit Testing

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do

# Run any test in app/tests upon save.

watch(%r{^.+Test\.php$})

# When a view file is updated, run tests.

# Tip: you probably only want to run your integration tests.

watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

# When a file is edited, try to run its associated test.

# Save app/models/User.php, and it will run app/tests/models/UserTest.php

watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}

end

Comments (0)