2周前，我將 TravisLight 開源了，這是一個建立監(jiān)控的工具，也是一個用于 Travis-CI 的構(gòu)件監(jiān)控工具。出于興趣，我用了一個周末的時間做了這個項目，而且我是以一個真正的前端開發(fā)者的角色來做的。

當我在 Nelmio 的時候，盡管我做了一些javascript的應(yīng)用，但我參與的更多是后臺開發(fā)。大部分時間我是在寫API給前端調(diào)用，而且在工作中經(jīng)常會出現(xiàn)偏差。實際上，我認為每一個做后臺的開發(fā)者應(yīng)該花些時間在前段開發(fā)上，補充一些前端知識，反之亦然。這是讓你明白在工作中自己真正需要做些什么的最好的方法之一。

我認為一個前端工程師需要的唯一東西是一個好用的 API，和一個全面的文檔。作為一個后臺開發(fā)者，你必須提供這兩個。所以，前端的工程師的水平取決于你。但是，不要迫使你的前端人員去使用你的工具。的確，Assetic 對于 PHP 是一個很好的開發(fā)工具，但是它對于前端工程師來說并不是一個好的工具。有許多更好的開發(fā)工具可以編譯 JS/CSS 文件，寫 JavaScript，例如 Grunt。讓你前端工程師使用自己的工具吧！在一個 Symfony2 項目中，我會命令把所有的 JS/CSS 文件都放在 web/ 的文件夾中，而不是放在 *Bundle/Resouces/public 這樣的文件夾中，這樣，前端就不用為了找 JS/CSS 文件夾而去瀏覽整個項目了。

但這不是我寫這篇文章的目的，讓我來解釋我為什么和怎樣寫出 TravisLight 和我發(fā)現(xiàn)的工具吧。

最初

我想學習一下Backbone.js，因此我著手閱讀了Backbone Fundamentals這本書。如果你對Backbone還不甚了解，那我給你介紹下，Backbone 是一個JavaScript 框架，它可以為你編寫Web程序提供一個架構(gòu)。

眾所周知，在項目中實踐是最佳的編程學習方式，因此，我決定使用Travis-CI API去寫一個Backbone.js 應(yīng)用程序，也就是TravisLight 。TravisLight 正是那個我一直想要的，用來管理我的開源項目的簡明工具。這真是一個絕佳的起步項目，尤其適合在周末進行。

我使用了Lo-Dash，一個Underscore.js的替代品，它具有風格一致，定制靈活，性能優(yōu)越等優(yōu)點。同時，我也使用了RequireJS和Moment.js。這樣，我就需要一個工具去管理所有的這些依賴，因此我關(guān)注了下來自Twitter的Bower。

Bower，網(wǎng)頁包管理器

Bower是一個網(wǎng)頁包管理器，也就是JS/CSS庫包管理器。雖說它現(xiàn)在是一個包下載器，但還是有必要用它來避免對 jQuery， Twitter Bootstrap等進行版本控制。你只需要一個像這樣的component.json文件：

{ “name”： “travis-light”， “dependencies”： { “jquery”： “~1.8.3” } }

運行“bower install”把依賴關(guān)系安裝到組件或文件夾。 現(xiàn)在，我可以開始著重弄我的應(yīng)用。每次我需要一個新的庫只要運行“ bower install--save”來安裝和更新“component.json”文件就行了。 有時候，我需要使用一些工具幫助我在應(yīng)用上完成一些像運行jshint或編譯文件的任務(wù)。于是我試了“Grunt”——一個Javascript編譯工具，感覺還不錯哦。

Grunt， JavaScript 編譯工具

Grunt是一個基于任務(wù)的命令行 JavaScript 工程編譯工具。 第一眼看上去， 這個工具似乎難以使用，但是一旦你用了，它太棒了！你能夠驗證（Lint）你的文件，縮小JS/CSS文件，運行測試單元等等。

在TravisLight，我主要使用Grunt 打包應(yīng)用程序。 打包應(yīng)用程序意味著：

編譯JavaScript文件;

編譯 CSS 文件;

在 HTML 標記中使用編譯好的文件;

復制依賴庫。

編譯Javascript文件就是編譯 RequireJS 的依賴關(guān)系。幸虧有 grunt-contrib-requirejs插件，太簡單了！

requirejs： { compile： { options： { name： “main”， baseUrl： “js/”， mainConfigFile： “js/main.js”， out： “dist/compiled.js” } } }

在TravisLight 里面編譯CSS有兩步：

首先、把CSS里面的所有圖片用grunt-image-embed 插件嵌進來：

imageEmbed： { application： { src： ‘css/application.css’， dest： ‘dist/application-embed.css’， deleteAfterEncoding ： false } }

然后，用grunt-contrib-mincss 插件壓縮CSS文件；

mincss： { compress： { files： { ‘dist/compiled.css’： ［ ‘css/bootstrap.min.css’， ‘dist/application-embed.css’ ］ } } }

標簽： 前端工程師 javascript應(yīng)用 編程軟件 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。