前端开发环境 Silky

MIT
JavaScript
跨平台
2014-10-07
wvv8oo

Silky是一个多用户协作的前端开发环境,正如她的名字一样,Silky希望让前端的协作开发能如丝般的润滑。Silky基于HandlebarsLess,选择Handlebars作为模板引擎的原因是因为它很简单,Less的争议性可能没有模板引擎这么大,毕竟可供选择的 并不多。

对于重构人员来说,TA可能只需要记住几条模板命令就能轻松实现模块化开发了。Silky除了支持原来的Handlebars命令,还对Handlebars进行扩展,支持import,loop,未来可能还会支持更多的命令。

功能摘要

  • 集成HTTP功能,只需要一条命令就可以在当前目录下创建一个Silky服务器

  • 支持代理,用于解决跨域问题

  • 支持HTML与CSS模块化开发

  • 实时编译coffee和less文件

  • 支持路由重写

  • 支持多环境

  • 支持多语言

安装

  1. 在*nix下,使用sudo npm install -g silky执行安装,在此之前,请确保你已经安装了node.js。请注意,silky必需全局安装。

  2. 如果你没有安装coffee-script,你需要使用npm install -g coffee-script进行安装

使用

  1. 在你的工作目录,执行silky init创建一个新的silky工作环境 **注意:目前还不支持此命令,需要复制samples/.silky到工作目录

  2. 执行silky命令,默认情况下,你可以使用http://localhost:14422/来访问你的网站

silky命令及参数

silky命令的参数优先级要高于配置文件,例如你在配置文件指定了端口为14422,但如果你使用silky -p 80,那么silky的监听端口将会是80而不是14422

build

silky build可以将项目build到一个指定的文件夹,你也可以配合-o来指定输出的目录,配合-e来指定工作环境,默认情况下,silky build的工作环境为production

init

'silky init可以初始化一个silky项目,这将会在当前的目录下创建一个.silky的配置文件夹。使用silky init -f`,可以创建一个silky的示例项目,其目录结构是silky推荐的目录结构。

-p

silky -p指定工作端口,如sudo silky -p 80,注意:80端口在*nix下需要su权限

-e

silky -e用于指定工作环境,如silky -e production将会工作于production环境,silky将会读取.silky/production下的所有配置文件

模板

模板是silky很重要的一环,silky采用handlebars作为标准模板,更多可以参考handlebars的官方网站。silky将.hbs作为模板的识别扩展名。

silky对handlebars进行扩展,如果你并不熟悉,你只需要记住扩展的几个命令就可以了。

路由

silky遵从html文件优先原则,换句话说,当你访问http://localhost:14422/index.html的时候,silky首先会查找template/index.html,如果存在则直接返回这个html文件,否则会查找template/index.hbs执行渲染并返回

数据源

silky在启动的时候,会扫描.silky/development下的所有json文件作为模板渲染的数据源,如果工作环境为production,将会扫描./silky/production下的所有json文件。

文件名将被作为键值。例如在.silky/development下有global.json和index.json文件,那么,在模板中使用{{global.title}},将会取到global.json文件中的title键值。page.index.foo将会读取page.json文件中的index.foo键值。

数据源将会处于被监控状态,当任何数据源发生变化,都将会引起浏览器的自动刷新。

silky变量

在模板中,silky是一个全局变量,提供silky的一些运行信息,如{{silky.env}}将会输出工作环境是development或production,一般用于根据开发环境或工作环境输出不同的html。

扩展的命令

partial/import

import命令兼容partial,但推荐使用import,因为更为直观和常用。

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

引用子模块,handlebars本来是使用{{> module/file}}的方式引用子模板,但是原生的命令并不支持传递参数,import命令可以传递参数。在示例命令中,将会传递global.foo给子模板。

import的模板路径为相对于template下的绝对路径,换句话说,如果你的子模板在/template/module/header,而模板文件在/template/authority/signin,import的引用路径应为module/header。记住,不管你的模板文件在什么位置,或者子模板嵌套引用,都需要使用绝对路径。

注意,如果import指定了数据源,那么被import的子模板使用的数据源就是这个被指定的数据源,而非全局的数据源。例如{{import "module/header" page.index.header}},那么在module/header这个模板中,使用{{title}}将会读取page.index.header.title`,了解这一点非常重要。

loop

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

loop命令用于循环输出某个子模块,第一个参数是模块的绝对路径,第二个参数是将要重复的次数据,但第二个参数也可以是从数据源中取得的数组。

if

示例:{{#if silky.env "development"}}当前环境是开发环境{{/if}}条件语句,注意中间并没有等号,这和我们平时用的不一样。

css/less

silky支持less和css,关于less,请参考less的官方网站。

不同的是,silky下,less需要使用绝对路径进行引用,如果你要引用module下的header.less,应该是使用@import "module/header";,而不是@import "../module/header";

路由

当你访问http://localhost:14422/css/main.css,将会和模板路由同样的原则,css优先于less,所以,不要试图在同一个文件下存在文件名相同而扩展名不同的文件。如main.css和main.less,这样将永远无法响应到main.less

js/coffee

silky同时支持js和coffee,如果是coffee,在被请求的时候,将会编译为js并返回。关于coffeescript,参考coffeescript的官方网站。

路由

当你访问http://localhost:14422/js/main.js,将会和模板路由同样的原则,js优先于coffee,所以,不要试图在同一个文件下存在文件名相同而扩展名不同的文件。如main.js和main.coffee,这样将永远无法响应到main.coffee

基于内部原因,silky会替换掉路径中含有.souce的字符,如http://localhost:14422/js/main.souce.js,返回的将会是http://localhost:14422/js/main.js。

配置文件

配置文件位置在.silky/config.js,config.js是一个node.js文件。

port

指定端口,默认为14422

proxy

指定代理,一般用于跨域请求,silky集成的代理为json-proxy。通常情况下,只需要配置proxy.forward键就可以了。关于proxy的配置,请参考json-proxy的相关设置

build

用于配置build相关

output

指定输出目录,默认为./build

compress

指定是否压缩,可指定的项包括:js,css,html,internal。注意internal是指定是否压缩内联script

copy

将要复制的目录,通常有些目录在产品环境下是不需要的,如一些demo图片文件等

compile

编译处理的目录,在这里你可以设置build目标的目录和忽略文件。例如,你希望将template目录中的文件都build到根目录下,则配置template.target为./即可。ignore可以配置忽略哪些文件,template和css默认情况下为/module$/i,这将忽略名为module的文件夹

watch

配置将要监控哪些目录下文件的改动,key即是目录名,value是一个正则表达式,用于监控时匹配文件名。如果文件处于被监控中,当文件发生改变,将会引发浏览器中网页的自动刷新。

Silky项目的文件组织

一个典型的Silky的结构如下:

|____.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的配置文件

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

My opinion of the NFL jerseys

I am 32 years old and lives in Los Angeles, I like sports and I also like to watch the game. Last year I met online a NFL professional player, he is a team player Philadelphia E...

2016/09/02 17:18
4
0
一文详解下一代web应用模型—PWA

去年apple在iOS11.3的正式更新中,添加了对service worker的支持。新的桌面版Safari会默认打开Service Worker。这意味着我们可以通过Safari将支持PWA的站点像原生app一样添加到桌面,并且支持...

01/23 16:30
7
0
100offer举办的「寻找实干和坚持的技术力量」开源项目投票排名分析程序

100offer举办的「寻找实干和坚持的技术力量」开源项目投票排名分析程序

2015/09/26 17:39
862
0
Gone In 60 Frames Per Second: A Pinterest Paint...

Today we’ll discuss how to improve the paint performance of your websites and Web apps. This is an area that we Web developers have only recently started looking at more closel...

2013/08/16 09:54
19
0
英语单词后缀规则总结

英语对我们搞IT的人来说实在太重要了,你还在为记不住英语单词而苦恼吗?还在为看不懂thinking in java而伤神吗?看看我最近的研究,也许对你有些启发呢!基于英国国家语料库中最常见的18299...

2015/02/18 03:59
356
0

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部