aliceui.github.io/docs/tool.html at master · hhhcommon/aliceui.github.io · GitHub

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
124
125
126
127
128
129
130
131
132
<!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>
        if (!location.port) {
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
          ga('create', 'UA-39169474-1', 'auto');
          ga('send', 'pageview');
        }
        </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 - 调试&amp;文档</a></li><li><a href="#样式预编译">样式预编译</a></li></ul></div>

                <script type="text/template" id="list-template">
                    <li><a href="#"><i class="iconfont" title="单箭头右">&#x00E5;</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 - 调试&amp;文档<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 &amp; 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>