(生成)gen

上一个小节我们已经从零开始的创建出了一个应用，但是这个应用还仅仅是具有简单的骨架，并不能够正常的编译集成，还需要补充一些”实在”的东西才能够正常被我们使用和访问。

先来看一下脚手架里面的主页面现在是个什么样子？打开src/html/page/index.html。

<!DOCTYPE html>
<html>
<head>
<snippet id="header" />
  <!-- build:css css/style.css -->
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/index.css" />
  <!-- endbuild -->
        <title>my_first_app-看看脚手架是啥样子的？</title>
</head>
<body>
  <div id="main">
    <view id="my_first_app" home="true" />
  </div>
  <snippet id="footer" />
</body>
  <!-- build:js js/app.js -->
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
  <!-- inject:view -->
  <!-- endinject -->
  <!-- endbuild -->
  <script type="text/javascript">
    App.start();
  </script>
</html>

简单分析上面的页面，我们可以简单的看到以下几点重要的地方：

view标签进行了视图的声明和定义，并附加了几个属性
snippet标签进行了代码片段的声明和定义
js资源的引入都在一个build:js注解的包含之下
css资源的引入都在一个build:css注解的包含之下

命令介绍

C:\Users\Administrator>my_first_app>light gen -h
  Usage: gen [option]
  初始化工程的视图js和组件的js的模版结构，必须保证index.html中配置了view或者comp标签，否则无法生肖
  Options:
    -h, --help              output usage information
    -o --overide [overide]  代码生成的策略，默认当文件存在的时候不覆盖，当配置此参数后覆盖原代码

提示：如果您之前视图的代码已经存在且不再需要的话，请执行的时候携带-o选项，对原有代码进行覆盖！

命令使用

下面我们就给这个页面定义两个视图，分别用来展示登录和登录成功的提示。

<div id="main">
  <view id="login" home="true" />
  <view id="login/success"  />
</div>

好的，现在我们就对这两个视图的代码做代码生成，奇迹发生在下面这一行命令之后。

C:\Users\Administrator>my_first_app>light gen
[2016-03-24 10:53:15.114] [INFO] light - 生成视图(html):login
[2016-03-24 10:53:15.117] [INFO] light - 生成视图(js):login
[2016-03-24 10:53:15.118] [INFO] light - 生成视图(html):login/success
[2016-03-24 10:53:15.118] [INFO] light - 生成视图(js):login/success

我们再来看一眼目录结构。

├── project.json
└── src
    ├── css
    │   ├── index.css
    │   └── style.css
    ├── html
    │   ├── page
    │   │   └── index.html
    │   ├── snippet
    │   │   ├── footer.html
    │   │   └── header.html
    │   └── view
    │       ├── login
    │       │   └── success.html
    │       └── login.html
    ├── images
    │   ├── icon.png
    │   └── load.gif
    ├── js
    │   ├── api
    │   │   └── api.js
    │   ├── lib
    │   ├── regist
    │   │   └── index.js
    │   └── view
    │       ├── login
    │       │   └── success.js
    │       └── login.js

看出差异了吗？

构建工具

(生成)gen

命令介绍

命令使用