(集成)release

终于要进入编译集成的重头戏了，为了简单起见，我们还是先来介绍一下light的release命令。

命令介绍

要查询release子命令所具有的参数，请使用下面的这一行命令来检查。

C:\Users\Administrator>my_first_app>light release -h
  Usage: release -cuegw
  打包、编译、开发测试中的相关工具
  Options:
    -h, --help            output usage information
    -u --uglify           是否压缩(优化),压缩混淆js和css的内容
    --product             生产环境的组合优化选项,包含压缩合并以及增加后缀策略
    -c --concat           是否合并(优化),将资源引用合并为一份,减少http请求数
    -w --watch [watch]    watch功能，检测变化自动打包
    -p --pack [pack]      输出zip包
    -s --suffix           是否添加反缓存后缀
    -b --brower [brower]  直接打开浏览器,同时打开server

需要注意的一点是这些命令选项是可以组合使用的，比如您想既合并又压缩同时添加后缀策略可以使用light release -ucs。那么如果我使用的命令是light release -wbpsuc 代表了什么呢？

提示：开启-b选项同时配合-w选项（即-wb），就可以做到便修改代码，然后浏览器自动刷新看到效果了。

上一个小节我们已经对登录这个页面的进行了两个视图的代码生成，但是还没有来得及看一下工具帮我们生成出来的代码是什么样子的，下面我们就来分别大致看一下这几个新生成的文件的内容。

关于打包参数的说明

通过在release命令的p指令添加参数的情况下生出包 light release -p uat 或者 light release -p

配置文件类似于：

"config":{
    "packager":{
        "env":["uat","sit","prod"],
        "files":["config.${env}.js"]
    }
}

其中env代表对应的包对应的环境 files表示那些文件是因环境而集成，${env}参数可位于任何位置。

最终打包时候的规则为:

单独指定light release -p uat，或者全部light release -p
寻找目录下的config.uat.js等，并更改其名字集成到输出包中

打包成功的包会把${env}的内容去除，如果其前面有.会把前面的.拿掉，所以引用这个资源的时候应该不包含${env}

如：

config.uat.js引入应为config.js
config_uat.js应为config_.json
configuat.js应为config.js

命令使用

代码的集成操作发生在下面的一行命令的执行之后：

C:\Users\Administrator>my_first_app>light release 
[2016-03-24 11:29:26.499] [INFO] light - 清除目标(dist)目录
[2016-03-24 11:29:26.538] [INFO] light - 资源输出dist目录
[2016-03-24 11:29:26.548] [INFO] light - 编译js模板文件
[2016-03-24 11:29:26.560] [INFO] light - 编译视图模板文件
[2016-03-24 11:29:26.834] [INFO] light - 编译less样式文件
[2016-03-24 11:29:26.980] [INFO] light - 编译coffeeScript文件
[2016-03-24 11:29:27.069] [INFO] light - 准备资源处理...
[2016-03-24 11:29:28.480] [INFO] light - 清除模板编译输出

不加任何参数的情况下，工具将帮我们生成一份未加优化过的可运行内容。生成的目录位于dist目录中，下面我们就来看一下工具帮助我们集成了什么东西？

dist
├── css
│   ├── index.css
│   └── style.css
├── images
│   ├── icon.png
│   └── load.gif
├── index.html
├── js
│   ├── lib
│   ├── regist
│   │   └── index.js
│   └── view
│       ├── login
│       │   └── success.js
│       └── login.js

和src目录没有什么差距吗？那我们就来看一下index.html是些什么内容吧。

<!-- dist/index.html  -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="apple-touch-icon-precomposed" href="favicon.png">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <!-- 添加的bootstrap样式表 -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
    <title>
      my_first_app-看看脚手架是啥样子的？
    </title>
  </head>
  <body>
    <div id="main">
      <div id="login" style="display:none;">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 text-center">
              <img src="images/icon.png" class="" alt="">
            </div>
            <div class="col-xs-12">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入您的用户名">
              </div>
              <div class="form-group">
                <input type="password" class="form-control" placeholder="请输入您的密码">
              </div>
              <button type="button" class="btn btn-primary btn-block login-btn">
                点我登录
              </button>
            </div>
          </div>
        </div>
      </div>
      <div id="login/success" style="display:none;">
      </div>
    </div>
  </body>
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
  <script type="text/javascript" src="js/regist/index.js"></script>
  <script type="text/javascript" src="js/view/login.js"></script>
  <script type="text/javascript" src="js/view/login/success.js"></script>
  <script type="text/javascript">
  App.start();
  </script>
</html>

而原来的index.html是什么样子的？

<!-- src/html/page/index.html  -->
<!DOCTYPE html>
<html>
<head>
<snippet id="header" />
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <!-- 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="login" home="true" />
  <view id="login/success"  />
  </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>
  <!-- endbuild -->
  <script type="text/javascript">
    App.start();
  </script>
</html>

大不一样吧？

发生了什么？

在release的时候，工具会将view,component,snippet的html代码组装到page中，同时根据view，component的配置将其相关的js资源引入到页面中，以使整个页面组合完整，可以正常使用。

构建工具

(集成)release

命令介绍

关于打包参数的说明

命令使用