15-minute rapid development of a kissy component (flow)

STEP1: Installing the Kissy Gallery Component Tool

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

Make sure you have Nodejs and NPM environments locally.

STEP2: Creating a Component Catalog

Manually create a component directory, such as offline.

Enter the directory, open the command-line tool, and execute the following command:

yo kissy-gallery 1.0

1.0 is the starting version of the component directory, can be set freely.

The tool will ask you for the component's author and email, which must be entered:

The following is the list of successful builds:

The contents and the purpose of each file can be seen in the Kissy Gallery Component Development specification.

STEP3: Packaging files

Assuming that the component has been developed, you need to package and compress the file before publishing, and run the following command:

grunt

(PS: Default Package Index.js only, if the component has additional requirements, please modify the gruntfile.js packaging configuration)

After the package is successful, index.js and index-min.js are generated in the build directory.

STEP4: Supplemental Component description, tutorials, demo

Open the Abc.json and modify the component information, such as the following:

{    "Name": "Uploader",  "version" : "1.4" ,< Span class= "PLN" >  "author" :{ "name" : "Ming River" , "email" :," page ":}, " cover ":" Http://img02.taobaocdn.com/tps/i2/T1C1X_Xs8gXXcd0fwt-322-176.png ", "desc" : "Asynchronous File Upload component" }  

Want to display the avatar on the homepage, the email field needs to be gravatar, no words can be uploaded to Gravatar.

The page field points to your personal page,

The cover field is a component cover picture.

Component Usage Tutorials and demo

All the tutorials for the component must be placed in the Guide directory and must be an MD file, and the server will be automatically rendered as an HTML page.

Demo must be placed in the demo directory, all the demo please follow the demo/index.html to write, especially the gallery package configuration.

Documents and Demo1 days are synchronized once (GitHub's interface limit).

Example of Access address for guide: http://gallery.kissyui.com/imgcrop/2.0/guide/index.html.

Example of Access address for demo: http://gallery.kissyui.com/imgcrop/2.0/demo/index.html.

Please place the demo's entrance in the MD file of Guide.

STEP5: Publishing Components

First press conference trouble, need to build a issue under KPM, need gallery Administrator in Kissygalleryteam user name fork your library.

After the release is simple, send a pull request, and then notify the Jade release can be.

When your component is published successfully, the system will post the message to your build issue.

Issue's content can be found in the velocity component, which takes the component library path under your user name.

Issue title unification is: Add Module component name.

After the publication succeeds, the system returns a message similar to the following:

The component's Abc.json is written in author name and email, or it will fail to publish!

15-minute rapid development of a kissy component (flow)