Easy Project Scaffolding with Gulp and Slush

Chris Nwamba
👁️ 27,511 views
💬 comments

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!

Table of Contents

    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

    104 posts

    JavaScript Preacher. Building the web with the JS community.