Front End Starter Package

As you know, Project A loves the concept of open source. Today, we want to give something back to the open source community. Check out our front end starter package on GitHub.

Front ends have become more powerful these days. And with great power comes great… chaos. It’s more important than ever to create clean, readable, and maintainable code, to use CSS preprocessors, to modularize JavaScript, and to compress things (especially when it comes to mobile devices).

Sooner or later everyone involved in the front end starts to use tools that make this stuff easier. In the past, it has always been a pain to decide which tool to use when. Since every developer has a distinct code style and toolset, it was tough to find a common workflow.

Fortunately task runners have come to the rescue quite some time ago. Correctly configured, they do all the repetitive work so that developers can focus on their code instead of their tools. Collecting working steps in a task runner enables an automated build process which can easily be replicated on the server-side during deployments.

At Project A we’re constantly creating new front ends. Consequently, there’s a lot of potential to reuse “good” code, workflows, and tools. As we benefit from open source code, naturally, we want to share our work and experiences, too. Recently, we built a front end starter package around the task runner gulp, which can be found on GitHub.

Our starter package includes (at the time of writing):

• a server (connect with browser-sync)
• JavaScript compression (using Uglify and source maps), building, concatenation, and hinting (JSHint)
• image optimization, compression, and spriting
• Sass (LibSass), prefixing and minification + source maps
• revisioning and asset management
• templating
• file watching
• file size monitoring
• a base directory / file structure
• browserify
• normalize & foundation
• jQuery

Feel free to view, comment, improve and use it here: https://github.com/project-a/frontend-starter