開源一小步，前端一大步

作為一名前端攻城獅，相信不少人已經養成了這樣的習慣。當你進入一個網站，總會忍不住要打開控制台看下它是如何布局的，動畫是如何實現的等。這也是前端開發者一個不錯的的學習途徑。

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 ([e-mail]) 
[?] 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 <[e-mail]>

接着收到反饋

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神馬的~