15分钟快速开发一个kissy组件(流程篇)

Step1: 安装kissy gallery组件工具

npm install yo grunt-cli -g
npm install generator-kissy-gallery -g

请确保本地带有NodeJs和Npm环境。

Step2:创建组件目录

手动创建一个组件目录,比如offline。

进入该目录,打开命令行工具,执行如下命令:

yo kissy-gallery 1.0

1.0为组件起始版本目录,可以自由设置。

工具会询问您组件的作者和email,这是必须输入的:

构建成功后的目录如下:

目录和各个文件的用途可以看Kissy Gallery组件开发规范说明。

Step3:打包文件

假设组件已经开发完成,发布前需要打包压缩下文件,运行如下命令:

grunt

(PS:默认只打包index.js,如果组件有其他需求,请修改gruntfile.js的打包配置)

打包成功后,会在build目录下生成index.js和index-min.js。

Step4:补充组件描述、教程、demo

打开abc.json,修改组件信息,比如像下面的内容:

{
    "name": "uploader",
    "version":"1.4",
    "author":{"name":"明河","email":"[email protected]","page":"https://github.com/minghe"},
    "cover":"http://img02.taobaocdn.com/tps/i2/T1C1X_Xs8gXXcd0fwt-322-176.png",
    "desc":"异步文件上传组件"
}

想要在首页显示头像,email字段需要是gravatar上的,没有的话可以到gravatar上传一个。

page字段指向你的个人主页,

cover字段为组件封面图片。

组件使用教程和demo

组件的所有的教程,必须放在guide目录下,而且必须是md文件,服务器会自动渲染成html页面。

demo必须放在demo目录,所有的demo请仿照着demo/index.html来写,特别是gallery包的配置。

文档和demo1天同步一次(github的接口限制)。

guide的访问地址示例:http://gallery.kissyui.com/imgcrop/2.0/guide/index.html。

demo的访问地址示例:http://gallery.kissyui.com/imgcrop/2.0/demo/index.html。

请把demo的入口放在guide的md文件内。

Step5:发布组件

第一次发布会麻烦些,需要在kpm下建一个issue,需要gallery管理员在kissygalleryteam用户名下fork你的库。

后面的发布就简单了,发个pull request,然后通知承玉发布即可。

当你的组件发布成功后,系统会反馈发布消息到你建的issue。

issue的内容可以参考:velocity组件,正文带上你用户名下的组件库路径。

issue标题统一为:add module 组件名称。

发布成功后,系统返回的消息类似如下:

组件的abc.json中写上author的name和email,不然会发布失败!

时间: 2024-08-01 11:15:23

15分钟快速开发一个kissy组件(流程篇)的相关文章

快速开发一个PHP电影爬虫

今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过这个php封装类可以很方便的解析html文档,对其中的html元素进行操作 (PHP5+以上版本)下载地址:https://github.com/samacs/simple_html_dom下面我们以 http://www.paopaotv.com 上的列表页 http://paopaotv.com

如何快速开发一个漂亮的网站?包括前端的设计,css布局等

如何快速开发一个漂亮的网站?包括前端的设计,css布局等 网站开发看起来简单,但是做起来很乱,对于个人来说尤其如此.比如,需要ps,css,html,js,java等知识,有什么好的办法,可以快速的开发一个网站的前端? 如今有很多快速开发平台:图形化可视化操作,所见即所得:通过拖拉即可完成表单.流程.报表页面的设计:用户通过编写JS文件,调用封装的单据的保存.查询.删除等方法,即可完成页面的功能设计: 平台工具设计的所有的页面发布后,将生成HTML格式的源码文件,WEB系统采用HTML伪静态技术

【转】两天快速开发一个自己的微信小程序 悬笔e绝 www.xuanbiyijue.com

文章出处:https://www.cnblogs.com/xuanbiyijue/p/7980010.html 作者: 悬笔e绝 www.xuanbiyijue.com 两天快速开发一个自己的微信小程序 一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先放上我做的小程序 可以在微信小程序搜索“悬笔e绝”,或者用微信扫描下面的二维码哦 (1)欢迎页:这个logo是当年念大学给社团做的l

[原创]快速开发一个PHP扩展

http://blog.csdn.net/taft/article/details/596291 http://blog.csdn.net/heiyeshuwu/article/details/3453854 [原创]快速开发一个PHP扩展,布布扣,bubuko.com

对jquery插件Jcrop开发一个裁剪组件

Jcrop是一款优秀的裁剪工具,它不仅可以裁剪图像,还可以裁剪canvas及任何的div元素,具体可参考: http://code.ciaoca.com/jquery/jcrop/ 基于Jcrop,开发一个js组件(Cut.js),使之可进行复用: (function(jQuery,window,undefined){    window.Cut = window.Cut || {};    var _default={        boxWidth:0,        boxHeight:0

使用.NET Core快速开发一个较正规的命令行应用程序

程序员的世界,命令行工具一直是"体验非常友好"的工具,也能自动化完成很多事情,同时还能结合shell来进行某项任务的批处理(脚本).在.NET Core中,命令行应用程序是基础,但是如何实现像 "cat" 这种功能呢?今天就为大家介绍一个packages来优雅的实现一个命令行应用程序. 一般命令行程序包含什么? 使用方式 帮助信息 子命令 参数 选项 帮助信息 帮助信息如上,介绍了命令的作用和参数.选项作用. 这个是必不可少的. 子命令 一个应用程序打包了多个功能,

winform快速开发平台 -> 基础组件之分页控件

一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. 当然我们不可能将控件的所有事件都发布出来. 我们返现所有的按钮操作都是围绕着我们的的查询记录来进行操作. 至此我们只需要提供出一个事件方法. 对外开放进行数据绑定即可. 完成对数据的分页参数处理. 分页控件如下图所示: 相关业务代码:主要代码由事件委托来处理 有了通用的分页控件,我们发现并没有绑定

教你3分钟快速开发微信公众号[订阅号][服务号]

Wx-tools是基于微信公众平台API的轻量级框架. 基于Wx-tools你可以开速开发一个订阅号/服务号的web应用后台. GitHub仓库 下载wx-tools-1.0.0.jar API开发文档 大三做过几个基于微信公众平台API的项目,感觉操作太繁琐,有时微信官方开发文档还有错!! 所以!wx-tools诞生了! 看过很多优秀的开源代码,特别是chanjarster的代码,优秀的设计思想让我迷糊灌顶. 不多说,让我带你快速有效可拓展的开发一个订阅号/服务号的后台. 到底有多简单?只需要

有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务

更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non