开源一小步,前端一大步

 

作为一名前端攻城狮,相信不少人已经养成了这样的习惯。当你进入一个网站,总会忍不住要打开控制台看下它是如何布局的,动画是如何实现的等。这也是前端开发者一个不错的的学习途径。

github大家应该也不陌生,作为开发人员的“社交网站”,上面聚集了众多了技术大牛,当然还有他们的作品。由于前端的特殊性,相对于其他领域,它的开源门槛、成本更低。

好吧,我是个标题党。下面简单介绍下前端开源的情况,以及casper在开源风潮下的小小尝试。

前端开源情况

关注最多的50个项目里,有35++个前端项目。大家比较熟悉的开源项目有(仅列举一小部分):

  • jQuery、Prototype、YUI
  • angular、knockout、backbone、ember
  • grunt、yeoman、bower
  • node、express

github中国地区前100名活跃的开发者,他们使用的语言情况如下(仅列举前几门)

  • JavaScrip: 80
  • Ruby:52
  • Python:46
  • C:34
  • C++: 30
  • Java:28

开源面前,我们能做什么

废话,这么多好资源,jQuery、Grunt、Yeoman、NodeJS等。。。赶紧用上先。感谢开源感谢我党,前端开发的面貌顿时焕然一新。

总用别人的东西,用得多了,心理有些过意不去,总想着什么时候也能够回馈下社区。很巧合的情况下,在做前端脚手架的时候,有些功能现有的插件无法很好的满足,只能自己硬着头皮写。突然灵光一闪——这不就是回馈社区的机会嘛!

下面就简单描述下casper第一个正儿八经的开源插件grunt-inline诞生的过程。虽然功能很简单,但毕竟迈出了第一步。主要内容如下:

  1. 插件编写及发布
  2. 接收反馈,持续更新维护(重要)

插件编写及发布

下面的步骤可能看起来挺多,但其实都是很简单的操作

首先安装gurnt插件模板

git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin

然后,在github上面为grunt-inline创建一个项目,项目地址如下

https://github.com/chyingp/grunt-inline.git

在本地将创建的github项目拉取下来

git clone https://github.com/chyingp/grunt-inline.git

命令行下进入grunt-inline目录,运行如下命令

grunt-init gruntplugin

依次回答如下命令,完成插件骨架创建

Please answer the following:
[?] Project name (grunt-inline)
[?] Description (The best Grunt plugin ever.) A Grunt plugin for replacing inline resources.
[?] Version (0.1.0)
[?] Project git repository (git://github.com/casperchen/grunt-inline.git) git://github.com/chyingp/grunt-inline.git
[?] Project homepage (https://github.com/chyingp/grunt-inline)
[?] Project issues tracker (https://github.com/chyingp/grunt-inline/issues)
[?] Licenses (MIT)
[?] Author name (chyingp)
[?] Author email (chyingp@gmail.com)
[?] Author url (none) http://chyingp.cnblogs.com
[?] What versions of grunt does it require? (~0.4.1)
[?] What versions of node does it run on? (>= 0.8.0)
[?] Do you need to make any changes to the above before continuing? (y/N) n

打开package.json,添加如下依赖

"devDependencies": {
"datauri": "~0.2.0"
},
"dependencies": {
"datauri": "~0.2.0"
},

编写具体业务逻辑,此步骤略过~有兴趣可查看源码

将插件新增的代码发布到github,输入用户名、明码等略过

git push

发布插件到npm registry,同样略过用户名密码等

nom publish

到这里,一个grunt插件就发布了~撒花~可以试下通过npm install grunt-inline安装~

接收反馈,持续更新维护

插件开源是第一步,也只是很小的一步,一个开源项目是否具有生命力,除去项目本身能够带来的价值,项目作者发挥了极为关键的作用。在项目开源的早期,因为关注度、成熟度等原因,项目作者本人是代码的主要贡献者和维护者。除了添加新功能、修改bug之外,还要接收其他开发者提交过来的issue,以及pull request等。

举个例子,前几个周五casper去机场接妹纸,在去机场的地铁上,百无聊赖地翻看gmail里的邮件。突然发现有个有个叫Robin的兄弟给我发了封邮件,正文如下:

Robin

Hi,

I have trouble to make grunt-inline working.

Could you help me? I do the same stuff than in your documentation: https://npmjs.org/package/grunt-inline

Cheers,
Robin

内心小鸡冻,虽然不知道Robin兄弟籍贯何处,但看着这洋文毕竟高端大气上档次,即使是给自己提bug。于是做了件颇有 注定孤独一生 意味的事情:立刻回了邮件,然后在机场改bug,测试后提交。

casper

发送至 Robin
just notice your email~ now on the way to the airport, i will take care of it as soon as possible :) 发自我的 iPhone 在 2013-8-21,下午5:30,Robin <xxxxxxx@gmail.com>

接着收到反馈

Robin

Great, it works :) could be nice to make it more flexible though.

Let me know if you need help for the translations :) I'm not native english but I can help!

Cheers,
Robin

之后几次邮件来回,Robin童鞋灰常热情地表示愿意在插件帮助文档的翻译上提供帮助。当然,文档的国际化一直在我的todo list里。。。

One suggestion: if you write everything in english, it will probably enable your grunt tasks to be used by more people. You could also do two distinct sections: one in english, one in chinese. What do you think?

—— good suggestion,I've added it to my todo list, though English is a big challenge for me~

写在后面

截至目前为止,grunt-inline插件的最新版本为0.1.9,期间共收到了三名开发者的反馈(包括阿泽),有提bug的,也有提功能需求的。npm上周的下载量为31(少的可怜~~可以考虑推广和国际化哈哈)。

grunt-inline只是个不值得一提的开源小插件,欢迎大家也加入到开源的大家庭 :)

俺github地址:https://github.com/chyingp

插件github地址:https://github.com/chyingp/grunt-inline

插件npm地址:https://npmjs.org/package/grunt-inline

欢迎下载试用提交反馈bug神马的~

 
分类: 经验总结

github开源项目的更多相关文章

  1. 2015-2016最火的Android开源项目--github开源项目集锦(不看你就out了)

    标签: Android开发开源项目最火Android项目github 2015-2016最火的Android开源项目 本文整理与集结了近期github上使用最广泛最火热与最流行的开源项目,想要充电与提 ...

  2. 如何参与一个 GitHub 开源项目?

    最近一年开源项目特别的热,很多技术大会或论坛都以开源项目作为主题进行探讨,可见这是一种趋势.而Github作为开源项目的著名托管地,可谓无 人不知,越来越多的个人和公司纷纷加入到Github的大家族里 ...

  3. Android笔记——导入Github开源项目CircleRefreshLayout

    百度n久都找不到android studio导入第三方类库的正确方法,纠结睡不着 ,最后终于蒙到了方法,原来想太多了  ---------------------------------------- ...

  4. 如何参与一个GitHub开源项目

    Github作为开源项目的著名托管地,可谓无人不知,越来越多的个人和公司纷纷加入到Github的大家族里来,为开源尽一份绵薄之力.对于个人来讲,你把自己的项目托管到Github上并不表示你参与了Git ...

  5. 开源项目福利-github开源项目免费使用Azure PipeLine

    微软收购Github后,很多人猜想微软可能会砍掉VSTS,然而事实VSTS并没有砍掉,关于Azure Devops的详细信息可以查看 这篇博客,如果想查看原文也可以从链接里提供的原始地址里查看. 今天 ...

  6. 基于RBAC模型的权限系统设计(Github开源项目)

    RBAC(基于角色的访问控制):英文名称Rose base Access Controller.本博客介绍这种模型的权限系统设计.取消了用户和权限的直接关联,改为通过用户关联角色.角色关联权限的方法来 ...

  7. Android Hawk数据库 github开源项目

    Android Hawk数据库 github开源项目 Hawk 是一个很便捷的数据库  . 操作数据库仅仅需一行代码 , 能存不论什么数据类型 . github 地址: https://github. ...

  8. [Android开源项目] GitHub开源项目总结 (转)

    [Android开源项目] GitHub开源项目总结 GitHub开源项目android-styled-dialogs http://neast.cn/forum.php?mod=viewthread ...

  9. iOS:开发常用GitHub开源项目(持续更新)

    IOS开发常用GitHub开源项目(持续更新) 数据类 开源库 作者 简介 AFNetworking Mattt 网络请求库 ASIHTTPRequest pokeb 网络请求库 Alamofire ...

  10. 如何参与一个GitHub开源项目?

    如何参与一个GitHub开源项目? 摘要:本文是Github官如何参与一个GitHub开源项目方给出的参与Github上开源项目的一些指导,对希望加入开源社区的开发者是一个不错的参考. 最近一年开源项 ...

随机推荐

  1. crawler_爬虫代理方案

    爬虫往往会遇到各种限制ip问题 理方案(爬虫) IP代理软件 优势标记: 是 自动切换IP 基本无开发成本标记: 黄色, 考虑切换IP时 ,网络瞬时异常 IP池,由商家维护 劣势标记: 非 部署 每个 ...

  2. CSharp设计模式读书笔记(23):模板方法模式(学习难度:★★☆☆☆,使用频率:★★★☆☆)

    模板方法模式:定义一个操作中算法的框架,而将一些步骤延迟到子类中.模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模式角色与结构: 实现代码: using System; ...

  3. JDBC连接池的简单实现

    首先解释一下,我在做自己android发育.java web这是我的弱点,就在最近,京东云免费,因此,要折腾几.有一点经验,特别是作为共享. 假设内容的文章是错,还请高手指正. 我在这里web结束,需 ...

  4. MVC 验证码

    验证码类 public class VerifyCode { public string checkCode = String.Empty; public byte[] BuildImg() { in ...

  5. C语言双向链表

    原文:C语言双向链表 今天写了点双向链表的各种操作,写插入的时候费了点时间,不过,现在看来还是值得耗费那点时间去写的,这种小东西应该能信手拈来才行啊. /*双向链表*/ #include <st ...

  6. C#备份还原MySql数据库

    原文:C#备份还原MySql数据库 项目结束,粘点代码出来让Google或Baidu一下,原因是现在还搜不到这么现成的 调用MySql的工具mysqldump来实现. 类Cmd来实现调用cmd命令, ...

  7. 第4章2节《MonkeyRunner源码剖析》ADB协议及服务: ADB服务SERVICES.TXT翻译参考(原创)

    天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...

  8. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  9. ichartjs 使用BUG,assign_scale:true 解决

    今天纯属灌水,好久没灌水的. 最近使用了flotr2 和 ichartjs进行canvas图标的开发,都不能满足需求. 没办法,先将就用用吧.然后,既然其他大神推荐使用ichartjs,为了统一,我也 ...

  10. 王立平--string.Empty

    String.Empty 字段 .NET Framework 类库 表示空字符串.此字段为仅仅读.命名空间:System 程序集:mscorlib(在 mscorlib.dll 中) protecte ...