Introduction
In this article, I aim to provide you with a basic introduction to Slush (Find it here: http://slushjs.github.io/). Slush is a scaffolding tool to build boilerplates for rich web applications, much like the very popular tool, yeoman (http://yeoman.io/), but also with its own set of commands and generators. Please take a note that Slush does not come with any functionality for your project, rather it puts forward a ton of tools and conventions to be followed and maintained throughout your project. The main feature which sets apart Slush is that it uses gulp for project scaffolding. It gives a developer the great benefits of a streaming build system without having to manage the components manually.
Generator and Gulp
You must be wondering what is all the fuss about Slush and gulp together. If you are familiar with Grunt, understanding Gulp will be very easy for you and you will definitely find it much simpler than Grunt itself. Even if you are not familiar with Grunt, I will give you a brief explanation. But before that, let us first check out the generators.
If you've previously used Eclipse or Visual Studio, you might have noticed the project templates pre-installed inside those IDEs. These templates provide you with a basic structure from which you can start building your project from ground up. The concept is very similar with generators, which help to scaffold a conventional project structure using different tools e.g. Bootstrap, AngularJS, Bower etc. In other way, you can also add component to your existing project using generators. Slush gives you a good number of options for generators to choose from depending on requirements for your project. In addition, you can also create your own generator in order to cater to your needs.
Gulp is a task-runner helping to automate most of your repetitive development tasks. Slush uses gulp to create generators in a very straightforward way since Gulp does not need much of configuration on its own. Gulp provides a number of plugins and templates to generate an application using gulp-template, gulp-install etc commands. To simplify the usage of gulp as a generator, slush comes in the rescue. With Slush, you do not need to worry about other required configurations, just sit back and let it do its work with gulp.
Starting with Slush
Pre-requisites
1. Basic knowledge of terminal or bash or command prompt
2. NodeJS installed in your system
Installation
The first requirement is Node.js for setting up your Slush and other important packages in your system. If you have not installed Node already, you can find it here https://nodejs.org/en/ Go ahead and install it. Check the insallation by typing the following command npm -v. You are supposed to get a version check for npm if it is installed, else try reinstalling it.
npm -v
The output should be something like this below:
3.9.6
Next, install Slush CLI globally using npm in the following way:
npm install -g slush
Wait for few minutes as it installs a bunch of stuff in your local lib. For verifying installation, type the following:
slush -v
It will instantly show you the version of slush installed in your system.
Alternatively, you can install gulp and bower CLI with slush or manually for future usage. Bower is a client-side package manager mostly used for managing packages like Bootstrap, javascript frameworks and libraries etc.
npm install -g slush gulp bower
Finding and installing a generator
The previous commands were basic setup for Slush. Next will be Slush has a good collection of generators developed by its brilliant community members. You can check out the generators here and choose which one best suits your needs. angular-gulp generator is very popular, so let us install this generator and scaffold out a project. the simple syntax for installing any generator is: npm install -g slush-<generator-name>
npm install -g slush-angular-gulp
Scaffolding out an Angular app
Create a new empty project folder and type the following command. This will take you through the whole scaffolding process and create all the necessary folders and files for you.
slush angular-gulp
Next Slush asks you a set of interactive questions to help you choose your project dependencies carefully. You don't have to do any configuration, just answer the questions and sit back and relax. Amazing, isn't it? Check out the scaffolding process in the below screenshot.
I selected the name "mysample" for this app. The project folder will pretty much look like:
Running the application
To see all these in action, run the application by using gulp serve. Before that, run npm install and bower install to confirm your application has all the required packages installed locally.
npm install && bower install
Next, serve the files from terminal through gulp streamline. Make sure no other application is running via gulp serve to prevent any possible error.
gulp serve
Conclusion
Slush helps to save your time and increase your productivity by providing all the necessary convention and structure you need. Make sure to check out the catalogue of generators to choose which one best suits you. With some of them, you can also find a sample app scaffolded out by the generator itself, which will guide you through rest of your project. Also, you can create your own generator with Slush which I will show in later articles. Happy scaffolding! :)
