开源一小步,前端一大步

简介:

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

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:30Robin <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只是个不值得一提的开源小插件,欢迎大家也加入到开源的大家庭 :)

 

相关文章
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
推荐6款超级好看的开源中后台前端框架
推荐6款超级好看的开源中后台前端框架
57 0
|
7月前
|
JSON 前端开发 JavaScript
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
|
2月前
|
数据采集 移动开发 前端开发
2023年, 前端路上的开源总结(最新更新)
2023年, 前端路上的开源总结(最新更新)
19 0
|
7月前
|
前端开发 API
前端(十五)——开源一个用react封装的图片预览组件
前端(十五)——开源一个用react封装的图片预览组件
101 0
|
8月前
|
设计模式 JavaScript 前端开发
高质量前端免费开源书籍推荐
这篇文章中整理了一系列前端开发相关的开源书籍,全部都可以免费在线阅读,内容质量都非常的高,中文英文的都有,包括了 JavaScript、前端工程化、前端框架和面试四个主题。
112 0
高质量前端免费开源书籍推荐
|
9月前
|
SQL 前端开发 数据库
|
前端开发 JavaScript 安全
常用前端开源静态网站推荐
常用前端开源静态网站推荐
567 0
常用前端开源静态网站推荐
|
存储 缓存 JavaScript
来学习开源模块化前端框架—Layui【Layui 极致轻量前端框架】
它是一个开源的 Web UI 解决方案,采用自己的经典模块化规范,遵循原生 HTML/CSS/JS 开发模式。它很容易使用。它的风格简单轻巧,而组件优雅而丰富。从源代码到使用方法的每一个细节都经过精心雕琢,非常适合快速开发的 web 界面。Layui 不同于那些基于 MVVM 的前端框架,但它并不违背这条道路,而是相信回归自然的方式。准确地说,它更面向后端开发人员。不需要参与前端工具,只需面对浏览器本身,让您需要的所有元素和交互都来自这里。
|
前端开发 安全 API
关于DAO模式NFT盲盒玩法系统开发的详细原理(前端UNI后端PHP)|(全开源)
关于DAO模式NFT盲盒玩法系统开发的详细原理(前端UNI后端PHP)|(全开源)
277 0
EMQ
|
网络协议 前端开发 Linux
Neuron Newsletter 2022-06|新增 1 个南向驱动、开源前端代码
六月,我们发布了 Neuron 2.1.0 版本,这个版本主要与 eKuiper 进行了深度集成,可一键部署携带数据处理功能的 Neuron。
EMQ
154 0