codescience-resource-reatured-image-generic

A Scaffolding tool for SFDC

(Yeoman + Gulp + Angular + MavensMate)

Yeoman + Gulp + Angular + MavensMate: Before we get stared have you used a scaffolding tool like Yeoman? If the answer is no… then you should. Using a scaffolding tool can not only help developers do more with less effort but can also help new team members to hit the ground running. Let’s go over some of the reason’s to use a scaffolding tool.

  • Application Structure
  • Task Runner (grunt / gulp)
  • Package Management (bower / npm)
  • Local Dev Server

If all a scaffolding tool did was copy your folder structure  so all apps / projects had a common set up that would worth it. But you get much more than that so let’s talk about task runner’s i.e. grunt and gulp. Task Runner’s allow you to add commonly used best practices to you applications build process. These task include minification, uglification and the use of preprocessors like Sass or Less. Just using these best practices your code can have up to a 3x reduced footprint. For example a boilerplate app with jQuery, Angular and one view and some images went from 2.9MB to 914KB by using a task runner. With this reduction your assets load times decrease and the user will also notice a difference in the application response time. By this point your thinking that using a scaffolding tool is great and has some real benefits but wait there is more. One of the most important features of a scaffolding tool is package management. Package Management like bower or npm allows you to keep track of what an app / project has used to build with i.e. angular / bootstrap / jquery. But more importantly package management keeps up with the versions of the resource used with the app / project. This is a huge benefit when bringing new devs on to a project and allows for code to used with github. If you bring a new dev on to the project a simple “git clone” “bower install” “npm install” will have you up in running in minutes.

The video below is a fork of Yeoman gulp-angular template to add Salesforce static resources to the build process with MavensMate.

Yeoman + Gulp + Angular + MavensMate