Silky是一個(gè)多用戶(hù)協(xié)作的前端開(kāi)發(fā)環(huán)境，正如她的名字一樣，Silky希望讓前端的協(xié)作開(kāi)發(fā)能如絲般的潤(rùn)滑。Silky基于Handlebars和Less，選擇Handlebars作為模板引擎的原因是因?yàn)樗芎?jiǎn)單，Less的爭(zhēng)議性可能沒(méi)有模板引擎這么大，畢竟可供選擇的 并不多。

對(duì)于重構(gòu)人員來(lái)說(shuō)，TA可能只需要記住幾條模板命令就能輕松實(shí)現(xiàn)模塊化開(kāi)發(fā)了。Silky除了支持原來(lái)的Handlebars命令，還對(duì)Handlebars進(jìn)行擴(kuò)展，支持import，loop，未來(lái)可能還會(huì)支持更多的命令。

功能摘要

• 集成HTTP功能，只需要一條命令就可以在當(dāng)前目錄下創(chuàng)建一個(gè)Silky服務(wù)器

• 支持代理，用于解決跨域問(wèn)題

• 支持HTML與CSS模塊化開(kāi)發(fā)

• 實(shí)時(shí)編譯coffee和less文件

• 支持路由重寫(xiě)

• 支持多環(huán)境

• 支持多語(yǔ)言

安裝

1. 在*nix下，使用sudo npm install -g silky執(zhí)行安裝，在此之前，請(qǐng)確保你已經(jīng)安裝了node.js。請(qǐng)注意，silky必需全局安裝。

2. 如果你沒(méi)有安裝coffee-script，你需要使用npm install -g coffee-script進(jìn)行安裝

使用

1. 在你的工作目錄，執(zhí)行silky init創(chuàng)建一個(gè)新的silky工作環(huán)境 **注意：目前還不支持此命令，需要復(fù)制samples/.silky到工作目錄

2. 執(zhí)行silky命令，默認(rèn)情況下，你可以使用http://localhost:14422/來(lái)訪(fǎng)問(wèn)你的網(wǎng)站

silky命令及參數(shù)

silky命令的參數(shù)優(yōu)先級(jí)要高于配置文件，例如你在配置文件指定了端口為14422，但如果你使用silky -p 80，那么silky的監(jiān)聽(tīng)端口將會(huì)是80而不是14422

build

silky build可以將項(xiàng)目build到一個(gè)指定的文件夾，你也可以配合-o來(lái)指定輸出的目錄，配合-e來(lái)指定工作環(huán)境，默認(rèn)情況下，silky build的工作環(huán)境為production

init

'silky init可以初始化一個(gè)silky項(xiàng)目，這將會(huì)在當(dāng)前的目錄下創(chuàng)建一個(gè).silky的配置文件夾。使用silky init -f`，可以創(chuàng)建一個(gè)silky的示例項(xiàng)目，其目錄結(jié)構(gòu)是silky推薦的目錄結(jié)構(gòu)。

-p

silky -p指定工作端口，如sudo silky -p 80，注意：80端口在*nix下需要su權(quán)限

-e

silky -e用于指定工作環(huán)境，如silky -e production將會(huì)工作于production環(huán)境，silky將會(huì)讀取.silky/production下的所有配置文件

模板

模板是silky很重要的一環(huán)，silky采用handlebars作為標(biāo)準(zhǔn)模板，更多可以參考handlebars的官方網(wǎng)站。silky將.hbs作為模板的識(shí)別擴(kuò)展名。

silky對(duì)handlebars進(jìn)行擴(kuò)展，如果你并不熟悉，你只需要記住擴(kuò)展的幾個(gè)命令就可以了。

路由

silky遵從html文件優(yōu)先原則，換句話(huà)說(shuō)，當(dāng)你訪(fǎng)問(wèn)http://localhost:14422/index.html的時(shí)候，silky首先會(huì)查找template/index.html，如果存在則直接返回這個(gè)html文件，否則會(huì)查找template/index.hbs執(zhí)行渲染并返回

數(shù)據(jù)源

silky在啟動(dòng)的時(shí)候，會(huì)掃描.silky/development下的所有json文件作為模板渲染的數(shù)據(jù)源，如果工作環(huán)境為production，將會(huì)掃描./silky/production下的所有json文件。

文件名將被作為鍵值。例如在.silky/development下有g(shù)lobal.json和index.json文件，那么，在模板中使用{{global.title}}，將會(huì)取到global.json文件中的title鍵值。page.index.foo將會(huì)讀取page.json文件中的index.foo鍵值。

數(shù)據(jù)源將會(huì)處于被監(jiān)控狀態(tài)，當(dāng)任何數(shù)據(jù)源發(fā)生變化，都將會(huì)引起瀏覽器的自動(dòng)刷新。

silky變量

在模板中，silky是一個(gè)全局變量，提供silky的一些運(yùn)行信息，如{{silky.env}}將會(huì)輸出工作環(huán)境是development或production，一般用于根據(jù)開(kāi)發(fā)環(huán)境或工作環(huán)境輸出不同的html。

擴(kuò)展的命令

partial/import

import命令兼容partial，但推薦使用import，因?yàn)楦鼮橹庇^和常用。

示例：{{import "module/header" global.foo}}

引用子模塊，handlebars本來(lái)是使用{{> module/file}}的方式引用子模板，但是原生的命令并不支持傳遞參數(shù)，import命令可以傳遞參數(shù)。在示例命令中，將會(huì)傳遞global.foo給子模板。

import的模板路徑為相對(duì)于template下的絕對(duì)路徑，換句話(huà)說(shuō)，如果你的子模板在/template/module/header，而模板文件在/template/authority/signin，import的引用路徑應(yīng)為module/header。記住，不管你的模板文件在什么位置，或者子模板嵌套引用，都需要使用絕對(duì)路徑。

注意，如果import指定了數(shù)據(jù)源，那么被import的子模板使用的數(shù)據(jù)源就是這個(gè)被指定的數(shù)據(jù)源，而非全局的數(shù)據(jù)源。例如{{import "module/header" page.index.header}}，那么在module/header這個(gè)模板中，使用{{title}}將會(huì)讀取page.index.header.title`，了解這一點(diǎn)非常重要。

loop

示例：{{loop "module/cell" 10}}

loop命令用于循環(huán)輸出某個(gè)子模塊，第一個(gè)參數(shù)是模塊的絕對(duì)路徑，第二個(gè)參數(shù)是將要重復(fù)的次數(shù)據(jù)，但第二個(gè)參數(shù)也可以是從數(shù)據(jù)源中取得的數(shù)組。

if

示例：{{#if silky.env "development"}}當(dāng)前環(huán)境是開(kāi)發(fā)環(huán)境{{/if}}條件語(yǔ)句，注意中間并沒(méi)有等號(hào)，這和我們平時(shí)用的不一樣。

css/less

silky支持less和css，關(guān)于less，請(qǐng)參考less的官方網(wǎng)站。

不同的是，silky下，less需要使用絕對(duì)路徑進(jìn)行引用，如果你要引用module下的header.less，應(yīng)該是使用@import "module/header";，而不是@import "../module/header";

路由

當(dāng)你訪(fǎng)問(wèn)http://localhost:14422/css/main.css，將會(huì)和模板路由同樣的原則，css優(yōu)先于less，所以，不要試圖在同一個(gè)文件下存在文件名相同而擴(kuò)展名不同的文件。如main.css和main.less，這樣將永遠(yuǎn)無(wú)法響應(yīng)到main.less

js/coffee

silky同時(shí)支持js和coffee，如果是coffee，在被請(qǐng)求的時(shí)候，將會(huì)編譯為js并返回。關(guān)于coffeescript，參考coffeescript的官方網(wǎng)站。

路由

當(dāng)你訪(fǎng)問(wèn)http://localhost:14422/js/main.js，將會(huì)和模板路由同樣的原則，js優(yōu)先于coffee，所以，不要試圖在同一個(gè)文件下存在文件名相同而擴(kuò)展名不同的文件。如main.js和main.coffee，這樣將永遠(yuǎn)無(wú)法響應(yīng)到main.coffee

基于內(nèi)部原因，silky會(huì)替換掉路徑中含有.souce的字符，如http://localhost:14422/js/main.souce.js，返回的將會(huì)是http://localhost:14422/js/main.js。

配置文件

配置文件位置在.silky/config.js，config.js是一個(gè)node.js文件。

port

指定端口，默認(rèn)為14422

proxy

指定代理，一般用于跨域請(qǐng)求，silky集成的代理為json-proxy。通常情況下，只需要配置proxy.forward鍵就可以了。關(guān)于proxy的配置，請(qǐng)參考json-proxy的相關(guān)設(shè)置

build

用于配置build相關(guān)

output

指定輸出目錄，默認(rèn)為./build

compress

指定是否壓縮，可指定的項(xiàng)包括：js，css，html，internal。注意internal是指定是否壓縮內(nèi)聯(lián)script

copy

將要復(fù)制的目錄，通常有些目錄在產(chǎn)品環(huán)境下是不需要的，如一些demo圖片文件等

compile

編譯處理的目錄，在這里你可以設(shè)置build目標(biāo)的目錄和忽略文件。例如，你希望將template目錄中的文件都build到根目錄下，則配置template.target為./即可。ignore可以配置忽略哪些文件，template和css默認(rèn)情況下為/module$/i，這將忽略名為module的文件夾

watch

配置將要監(jiān)控哪些目錄下文件的改動(dòng)，key即是目錄名，value是一個(gè)正則表達(dá)式，用于監(jiān)控時(shí)匹配文件名。如果文件處于被監(jiān)控中，當(dāng)文件發(fā)生改變，將會(huì)引發(fā)瀏覽器中網(wǎng)頁(yè)的自動(dòng)刷新。

Silky項(xiàng)目的文件組織

一個(gè)典型的Silky的結(jié)構(gòu)如下：

|____.silky
| |____config.js
| |____development
| | |____global.json
| | |____global.less
| |____production
| | |____global.json
| | |____global.less
|____css
| |____main.less
| |____module
| | |____global.less
| |____normalize.css
|____images
|____js
| |____main.coffee
| |____thorax.js
|____template
| |____index.hbs
| |____module
| | |____footer.hbs
| | |____head.hbs
| | |____header.hbs

template

template目錄用于存放模板文件.hbs和.html文件

css

css目錄用于存放.css和.less文件

js

js目錄用于存放.js和.coffee文件

.silky

.silky文件夾是silky的配置文件