如何利用一个周末时间成为前端工程师的

2012-12-29 14:20 稿源:51CTO.com  0条评论

2周前,我将 TravisLight 开源了,这是一个建立监控的工具,也是一个用于 Travis-CI 的构件监控工具。出于兴趣,我用了一个周末的时间做了这个项目,而且我是以一个真正的前端开发者的角色来做的。

当我在 Nelmio 的时候,尽管我做了一些javascript的应用,但我参与的更多是后台开发。大部分时间我是在写API给前端调用,而且在工作中经常会出现偏差。实际上,我认为每一个做后台的开发者应该花些时间在前段开发上,补充一些前端知识,反之亦然。这是让你明白在工作中自己真正需要做些什么的最好的方法之一。

我认为一个前端工程师需要的唯一东西是一个好用的 API,和一个全面的文档。作为一个后台开发者,你必须提供这两个。所以,前端的工程师的水平取决于你。但是,不要迫使你的前端人员去使用你的工具。的确,Assetic 对于 PHP 是一个很好的开发工具,但是它对于前端工程师来说并不是一个好的工具。有许多更好的开发工具可以编译 JS/CSS 文件,写 JavaScript,例如 Grunt。让你前端工程师使用自己的工具吧!在一个 Symfony2 项目中,我会命令把所有的 JS/CSS 文件都放在 web/ 的文件夹中,而不是放在 *Bundle/Resouces/public 这样的文件夹中,这样,前端就不用为了找 JS/CSS 文件夹而去浏览整个项目了。

但这不是我写这篇文章的目的,让我来解释我为什么和怎样写出 TravisLight 和我发现的工具吧。

最初

我想学习一下Backbone.js,因此我着手阅读了Backbone Fundamentals这本书。如果你对Backbone还不甚了解,那我给你介绍下,Backbone 是一个JavaScript 框架,它可以为你编写Web程序提供一个架构。

众所周知,在项目中实践是最佳的编程学习方式,因此,我决定使用Travis-CI API去写一个Backbone.js 应用程序,也就是TravisLight 。TravisLight 正是那个我一直想要的,用来管理我的开源项目的简明工具。这真是一个绝佳的起步项目,尤其适合在周末进行。

我使用了Lo-Dash,一个Underscore.js的替代品,它具有风格一致,定制灵活,性能优越等优点。同时,我也使用了RequireJS和Moment.js。这样,我就需要一个工具去管理所有的这些依赖,因此我关注了下来自Twitter的Bower。

Bower,网页包管理器

Bower是一个网页包管理器,也就是JS/CSS库包管理器。虽说它现在是一个包下载器,但还是有必要用它来避免对 jQuery, Twitter Bootstrap等进行版本控制。你只需要一个像这样的component.json文件:

{ “name”: “travis-light”, “dependencies”: { “jquery”: “~1.8.3” } }

运行“bower install”把依赖关系安装到组件或文件夹。 现在,我可以开始着重弄我的应用。每次我需要一个新的库只要运行“ bower install--save”来安装和更新“component.json”文件就行了。 有时候,我需要使用一些工具帮助我在应用上完成一些像运行jshint或编译文件的任务。于是我试了“Grunt”——一个Javascript编译工具,感觉还不错哦。

Grunt, JavaScript 编译工具

Grunt是一个基于任务的命令行 JavaScript 工程编译工具。 第一眼看上去, 这个工具似乎难以使用,但是一旦你用了,它太棒了!你能够验证(Lint)你的文件,缩小JS/CSS文件,运行测试单元等等。

在TravisLight,我主要使用Grunt 打包应用程序。 打包应用程序意味着:

编译JavaScript文件;

编译 CSS 文件;

在 HTML 标记中使用编译好的文件;

复制依赖库。

编译Javascript文件就是编译 RequireJS 的依赖关系。幸亏有 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’ ] } } }

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多