Easy Project Scaffolding with Gulp and Slush

As developers we always find ourselves getting bored of doing one thing every now and then just to kick-start a new project.

Personally, the most annoying phase of my development cycle is setting up because I find myself doing the exact (though with few differences) same thing I did in the previous project and the one before the previous project and so on.

The immediate option was to copy a previous project and get rid of the unwanted parts. Huh, that can be tedious too. Smart enough though, you could consider creating a template and push to GitHub, then clone it every time you would start a new project. The git option on the other hand is not good enough – take for instance you have created a MEAN repository for most of your application and your client explicitly asks for Angular-Material and not Bootstrap. The only thing you can do is clone, remove Bootstrap and download Angular-Material into the boilerplate which you still have to re-configure. What else can be used? GENERATORS!

Generators to the Rescue

Generators are gaining popularity in the community of programmers. In one way or the other, advanced IDEs like Visual Studio and Eclipse help you with a skeleton that has your specified dependencies so you can build your project on.

Unfortunately, JavaScript has no such IDEs and are only written with text (and code) editors. With this limitation in mind JS supported generators (like Yeoman and Slush(http://slushjs.github.io/#/)) were introduced and are completely configurable.

Slush and Gulp

gulp-home-page

Gulp is a task runner and so powerful that it can be used to generate an application with the help of gulp-template, gulp-conflict, gulp-install and some other gulp plugins.

To use gulp as a generator, you will have to specify the directory manually with some other required configurations and that is where slush comes in.

Slush was built by Joakim Carlstein (@joakimbeng) to help serve the purpose of centralizing generators. Slush does not offer any standalone service but depends on gulp.

slush-home-page

Also remember that Slush comes with no functionality of its own, the only thing it provides is a convention and convenience of running global gulpfiles (in this case slushfiles) with the purpose of scaffolding projects, or anything else useful for that matter. So if something is missing it should probably be implemented as a gulp plugin. – Joakim Carlstein.

Generators

Slush though still a growing framework comes with varieties of generators. It is open source and you can create yours and share. Slush basically runs the gulp module for every generator thereby producing a template as the slushfile specifies. Below are some popular generators:

Generator Short Description
slush-angular A slush generator for AngularJS using the Google Angular App Structure Recommendations
slush-fiberglass Slush generator for JS libraries
slush-core A Quick Generator for the FOUR major components you need to buid a project form the ground up. index.html, app.js, gulpFile.js, and server.js, e.t.c.
slush-nodewebkit Generate a simple scaffolding to build a node-webkit app from scratch
slush-phonegap A scaffolding to build applications with phonegap

Installation

As slush needs gulp to complete it’s task, it is required that you install gulp and slush together:


$ npm install -g slush gulp bower

The command will use node and npm install slush gulp and bower CLI globally on a local machine using npm (install node).

That is basically setup and we can now start creating and generating project templates. We will focus on generating templates and in later articles we will talk about creating generators. The most popular template generator is that of Angular so let us install the Angular generator and then scaffold a project with it:


$ npm install -g slush-angular

Scaffolding an Angular Application

On our empty project folder:


$ slush angular

This is were it gets amazing. Running the above command let’s you choose possible dependencies and then installing those dependencies for you with bower and npm. Answer the interactive questions carefully and for our application we will be allowing the generator to setup a Todo sample for us.

scaffolding Angular application scaffolding process

folde-structure Folder structure after scaffolding

Once Slush is done with its scaffold process, run gulp serve to serve the application on port 3000 of your localhost.

$ gulp serve

running-app Serving application with gulp

ran-app Running Todo application

Scaffolding Application Components

You can create sub-components such as controllers, filters, directives, services, modules.

Currently Joakim Carlstein is yet to provide this feature though he is on it but Venkatraman Prasanna provided a solution by creating another generator named slush-angular-gulp here

Install the generator:

$ npm install -g slush-angular-gulp

Start a project with it

$ slush angular-gulp

Now to add a sub-component:


$ slush angular-gulp:<component> <name>
// e.g. slush angular-gulp:controller article

Conclusion

Using generators as you have seen will increase your productivity as a developer by a significant percentage. Yeoman is good… Slush is awesome… Grunt is amazing… Gulp is wonderful.

So whichever combo suites your workflow, do not hesitate to use it. You are not limited to already provided generators like those in the provided table.

Take a break from your P.C, take a look at your past projects and isolate those repeated sections and logics into a generator which Scotch will cover soon on how to create and you are good to impress friends who never used a generator but do not forget to share with them.

Chris Nwamba

Passion for instructing computers and understanding its language. Would love to remain a software engineer in my next life.