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.
Slush and Gulp
Gulp is a task runner and so powerful that it can be used to generate an application with the help of
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.
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.
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:
|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|
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
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.
Once Slush is done with its scaffold process, run
gulp serve to serve the application on port 3000 of your localhost.
$ gulp serve
Scaffolding Application Components
You can create sub-components such as controllers, filters, directives, services, modules.
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
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.