(扩展)plugin

lighting自带插件体系。

命令介绍

通过以下方式可以查看light插件命令的可选选项。

C:\Users\Administrator>my_first_app>light plugin -h
  Usage: plugin [command]
  Lighting相关插件的搜索/更新/安装/移除
  
    Options:
  
      -h, --help       output usage information
      -a --add <name>  安装插件

两种插件的启用方式：都会读取project.json中的plugins配置，并以此为基准（配置在project.json文件中）

light release -e es6 启用的插件为plugins配置+es6
light release -e 启用的插件为plugins配置

lighting-plugin-es6

安装方式： light plugin -a es6
详细说明：

编程语言JavaScript是ECMAScript的实现和扩展，由ECMA（一个类似W3C的标准组织）参与进行标准化。ECMAScript定义了：
1. 语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
2. 类型 – 布尔型、数字、字符串、对象等。
3. 原型和继承
4. 内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
ES6就是ECMAScript 6,2015年6月草案通过并成为国际标准。

lighting-plugin-es6通过babel这个编译器将es6的代码编译成es5以兼容在大多数浏览器的正常运行。
示例：

es6的文件可以写在src目录下的任何位置，文件后缀名必须为es6，在page下html文件引入时后缀名为js。

假设工程目录为D:/project, 其中有一个es6文件src/test.es6,那么index.html中引入加载此文件的时候应该为<script src="test.js"></script>

src/html/index.html

<!DOCTYPE html>
<html>
<head>
<snippet id="header" />
  <!-- build:css css/style.css -->
  <link rel="stylesheet" href="css/style.css" />
  <!-- endbuild -->
	<title>demo</title>
</head>
<body>
  <div id="main">
    <view id="demo" home="true" />
  </div>
  <snippet id="footer" />
</body>
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
  <!-- build:js js/app.js -->
  <script src="test.js"></script>
  <!-- inject:view -->
  <!-- endinject -->
  <!-- endbuild -->
  <script type="text/javascript">
    App.start();
  </script>
</html>

src/test.es6

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

project.json

{
	"project":"demo",
	"version":"0.0.1",
	"desc":"Just For Fun",
	"type":"light-1.0",
	"plugins":["es6"]
}

打包编译时可以使用指令： light release -e(project.json配置有plugins的情况下) 或者 light release -e es6

lighting-plugin-jade

安装方式： light plugin -a jade
详细说明：

Jade 是一个高性能的模板引擎。

使用lighting-plugin-jade就是多了一种书写html文件的方式。
示例：

src/test.jade

doctype html
html
  body
    h1 My Site
    p Welcome to my super lame site.

<!DOCTYPE html>
<html>
<body>
  <h1>My Site</h1>
  <p>Welcome to my super lame site.</p>
</body>
</html>

project.json

{
	"project":"demo",
	"version":"0.0.1",
	"desc":"Just For Fun",
	"type":"light-1.0",
	"plugins":["jade"]
}

打包编译时可以使用指令： light release -e(project.json配置有plugins的情况下) 或者 light release -e jade

lighting-plugin-cachemanifest

安装方式： light plugin -a cachemanifest
详细说明：

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

1 .离线浏览 - 用户可在应用离线时使用它们
1. 速度 - 已缓存资源加载得更快
2. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
lighting-plugin-cachemanifest可以帮助开发者生成Application Cache的缓存配置文件。

具体Application Cache的使用说明可以参考离线应用。
示例：

project.json

{
	"project":"demo",
	"version":"0.0.1",
	"desc":"Just For Fun",
	"type":"light-1.0",
	"plugins":["cachemanifest"]
}

打包编译时可以使用指令： light release -e(project.json配置有plugins的情况下) 或者 light release -e cachemanifest

lighting-plugin-template

安装方式： light plugin -a template
详细说明：

lighting-plugin-template是为了兼容早期框架中的template目录下的模板文件编译而开发的。
示例：

src/template/hello.tpl

<%_.each([2,3,4],function(i){%>
<%=i%>
<%})%>

project.json

{
"project":"demo",
"version":"0.0.1",
"desc":"Just For Fun",
"type":"light-1.0",
"plugins":["template"]
}

打包编译时可以使用指令： light release -e(project.json配置有plugins的情况下) 或者 light release -e template

lighting-plugin-less

安装方式： light plugin -a less
详细说明：

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

lighting-plugin-less插件会将所有的src目录下的less文件编译处理为css文件，所以在html文件中引用资源的时候，后缀应为css。

假设工程目录为D:/project, 其中有一个es6文件src/css/index.less,那么index.html中引入加载此文件的时候应该为<link rel="stylesheet" href="css/index.css" />
示例：

src/css/index.less

.content{
  color:red;
  
  .row{
    color:green;
  }
}

src/html/index.html

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

project.json

{
"project":"demo",
"version":"0.0.1",
"desc":"Just For Fun",
"type":"light-1.0",
"plugins":["less"]
}

打包编译时可以使用指令： light release -e(project.json配置有plugins的情况下) 或者 light release -e less

lighting-plugin-vue

安装方式： light plugin -a vue
详细说明：

lighting-plugin-vue可以让工程支持vue的单文件组件。

使用lighting-plugin-vue有几个简单的规则：
1. 基于规范的考虑，可以作为组件使用的vue文件应该只存在于二级目录，也就是src的直接子目录，推荐使用vue作为统一的目录名
2. 所有的vue文件都会合并编译为vue-components.js，所以使用时还需要在html文件中引入此js
3. 组件最终会被注册为以目录和文件名相区分的组件，如src/vue下有一个App.vue的文件，这样组件使用起来就类似：<vue-hello></vue-hello>
示例：

src/vue/App.vue

<template>
  <div id="app">
    <hello></hello>
  </div>
  <div>
      <group>
        <cell title="vue" value="cool"></cell>
      </group>
    </div>
</template>
<script>
import Hello from './lib/Hello.vue'
import { Style, Group, Cell } from '../plugins/vux.js'
export default {
  components: {
    Hello,
    Style, // style component is necessary
    Group,
    Cell
  }
}
</script>
<style>
a{
 display:none;
}
</style>

src/vue/lib/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // Note: modifying `msg` below will not cause changes to occur with
      // hot-reload. As reloaded components preserve their initial state,
      // modifying these values will have no effect.
      msg: 'Hello World123!'
    }
  }
}
</script>

src/html/index.html

<!DOCTYPE html>
<html>
<head>
<snippet id="header" />
  <!-- build:css css/style.css -->
  <link rel="stylesheet" href="css/style.css" />
  <!-- endbuild -->
	<title>demo</title>
</head>
<body>
  <div id="main">
    <view id="demo" home="true" />
  </div>
  <snippet id="footer" />
</body>
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
  <!-- build:js js/app.js -->
  <script src="vue-components.js"></script>
  <!-- inject:view -->
  <!-- endinject -->
  <!-- endbuild -->
  <script type="text/javascript">
    App.start();
  </script>
</html>

src/html/view/demo.html

<div id="demo" style="display:none;">
    <vue-app></vue-app>
</div>

project.json

{
"project":"demo",
"version":"0.0.1",
"desc":"Just For Fun",
"type":"light-1.0",
"plugins":["vue"]
}

打包编译时可以使用指令： light release -e(project.json配置有plugins的情况下) 或者 light release -e vue

lighting-plugin-imagemin

安装方式： light plugin -a imagemin
详细说明：

lighting-plugin-imagemin可以压缩页面图像，在不影响图片分辨率的情况下降低页面的访问流量，提升用户的使用体验。

图片压缩插件支持jpg和png类型的图片
示例：

light release -e imagemin

压缩之前

压缩之前225K

压缩之后

压缩之后34.4K

构建工具

(扩展)plugin

命令介绍

lighting-plugin-es6

lighting-plugin-jade

lighting-plugin-cachemanifest

lighting-plugin-template

lighting-plugin-less

lighting-plugin-vue

lighting-plugin-imagemin