forked from aliceui/aliceui.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtool.html
More file actions
123 lines (115 loc) · 6.93 KB
/
tool.html
File metadata and controls
123 lines (115 loc) · 6.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice - 工具</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="nico-spm 0.5.5" />
<link type="image/x-icon" href="../static/favicon.ico" rel="icon">
<link rel="stylesheet" href="../static/css/normalize.css" />
<link rel="stylesheet" href="../static/css/site.css" />
<link rel="stylesheet" href="../static/css/solarized.css" />
<link rel="stylesheet" href="../static/style.css" />
<style>
/* alipay iconfont */
@font-face {
font-family: "rei";
src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423"); /* IE9 */
src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("https://i.alipayobjects.com/common/fonts/rei.woff?20130423") format("woff"), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */
url("https://i.alipayobjects.com/common/fonts/rei.ttf?20130423") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("https://i.alipayobjects.com/common/fonts/rei.svg?20130423#rei") format("svg"); /* iOS 4.1- */
}
.iconfont {
font-family: "rei"!important;
font-style: normal;
font-weight: normal;
cursor: default;
-webkit-font-smoothing: antialiased;
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1239219615670154" crossorigin="anonymous"></script>
<script src="../static/js/sea.js?nowrap"></script>
<!--[if lt IE 9]>
<script src="../static/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="../dist/bundle.js?nowrap"></script>
<div id="body-wrapper">
<div class="head-area">
<div class="title-area">
<h1>
<a href="../">Alice</a>
</h1>
<p class="description">写样式的更好方式</p>
<img src="/static/alice-top.png" alt="alice" />
</div>
<iframe src="http://ghbtns.com/github-btn.html?user=aliceui&repo=aliceui.org&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
</div>
<div class="nav-area">
<ol class="main-nav">
<li><a href="/"><i title="首页" class="iconfont"></i> 首页</a></li>
<li><a href="build.html">构建模块和样式库</a></li>
<li><a href="framework.html">基础框架</a></li>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="rule.html">规范和最佳实践</a></li>
<li><a href="start.html">开始使用</a></li>
<li><a href="tool.html">工具</a></li>
<li><a href="widget.html">通用样式库</a></li>
</ol>
</div>
<div class="main-area">
<div class="side-area"><ul><li><a href="#spm-包管理">Spm - 包管理</a></li><li><a href="#nico-调试-amp-文档">Nico - 调试&文档</a></li><li><a href="#样式预编译">样式预编译</a></li></ul></div>
<script type="text/template" id="list-template">
<li><a href="#"><i class="iconfont" title="单箭头右">å</i></a></li>
</script>
<div class="content-area">
<h1>工具</h1>
<div class="content"><!--filepath:docs/tool.md --> <blockquote>
<p>城里的女人就是白啊! <em>「 让子弹飞 」2010</em></p>
</blockquote>
<p>Alice 作为 Arale 的一部分，离不开 Arale 体系下的 spm 和 nico 两大工具，
使用方式也大同小异。另外 Alice 还产出和使用了一些工具来帮助开发。</p>
<p>Alice 目前源文件大多是纯 CSS 代码，但我们不排斥二次编译的 CSS 语言（比如 stylus、less、sass 等），
目前 <a href="http://aliceui.org/select">alice.select</a> 和 <a href="http://aliceui.org/nav">alice.nav</a> 这两个模块的源码就是用 stylus 写的。
我们希望有更多业界优秀的工具和语言参与到 Alice 的样式世界中来。</p>
<hr>
<h2 id="spm-包管理">Spm - 包管理<a href="#spm-包管理" class="anchor">¶</a></h2><p>spm 是基于 CommonJS 的构建和包管理工具，在 1.6 及以前的版本都是为 JavaScript 服务的。
我们针对样式模块的特点研究出了一套在 CMD 生态圈中如何管理和使用样式的方案，
并在版本 1.7+ 中实现了很多重要功能。相关 issue 可以看下 <a href="https://github.com/spmjs/spm/issues/645">#645</a>。
您会对 spm 对样式的支持有更多的了解。</p>
<p>目前 <a href="http://github.com/spmjs/spm">spm3</a> 已经发布，Alice 已经迁移到 spm3 版本之上，相关信息请阅读 spm 的<a href="http://spmjs.io/documentation">文档</a>。</p>
<pre>$ spm init // 初始化模块
$ spm install // 安装一个已有模块到本地
$ spm doc watch // 启动本地服务调试文档
$ spm doc publish // 发布文档到源中
$ spm build // 完成开发，构建模块
$ spm publish // 将模块发布到源上</pre><p>常用的命令基本就是这几个，更多 spm 的使用方式，请参考前面的开发教程或 Arale 的相关文档。</p>
<h2 id="nico-调试-amp-文档">Nico - 调试&文档<a href="#nico-调试-amp-文档" class="anchor">¶</a></h2><p>Nico 是一个 JavaScript 的静态文档生成工具，在 CMD 生态圈中被用于文档构建和 Demo 调试。它在 Alice 中的使用方式和 JS 下如出一辙。
你如果对 Arale 那套东西熟悉的话很容易就能上手。</p>
<p>这是目前前端文档和调试界最出色且简单的工具之一。用了它，你会爱上写文档。</p>
<p><a href="http://lab.lepture.com/nico/">nico 主页</a></p>
<p>在 Arale & Alice 整体方案中我们封装了 nico 到 <code>spm doc</code> 中。</p>
<h2 id="样式预编译">样式预编译<a href="#样式预编译" class="anchor">¶</a></h2><p>待补充。</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper">
<footer>
<p class="powered">
<a href="http://aralejs.org">Arale</a> •
<a href="http://aliceui.org">Alice</a> •
<a href="http://seajs.org">Sea.js</a> •
<a href="http://spmjs.io">spmjs.io</a> •
<a href="http://lab.lepture.com/nico/">nico-spm</a>
</p>
</footer>
</div>
<script>
window['aliceui.org'].init();
</script>
</body>
</html>