Getting Started with gulp

Getting Started with gulp

While working on a project, one is bound to have a bunch of repetitive tasks such as testing, minification, compiling less/sass/templates, etc., because we are humans, we are bound to make mistakes at one point or another (one can forget to minify some files, or recompile after some changes, etc.), and a build tool that can automate these things could be incredibly useful. There are plenty of options available like Grunt, Broccoli and Brunch.

The one that I prefer is gulp. It's a streaming build system and utilizes node.js' streams. Thus all the file manipulation is done in memory, making it very fast. It has a very fluent API for defining tasks which is usually called "piping".

Installation

Gulp is very easy to install. (Only prerequisite it has is node.js and npm to be installed. And since your are reading this, I assume that you already have done so.). You can get started in just three steps.

  1. Install gulp globally.
  2. Include gulp in your devDepenedencies.
  3. Create a gulpfile.js file

First, we need to install gulp globally by running the following command

npm install -g gulp 

Next, we need to add gulp to devDependencies of one of your projects. Make sure you have a package.json file, either created manually or by typing npm init. Once you have a package.json file, run the following command:

npm install --save-dev gulp 

And finally, we need a gulpfile.js file, where we can define our tasks. Make sure you have this file in the root of your project and add the following code to it.

var gulp = require("gulp"); 

gulp.task("default", function(){ 
    // The task definition will go here 
}); 

Now run gulp command in your terminal and you must see something similar to this.

[14:28:19] Using gulpfile ~/projects/gulp/gulpfile.js
[14:28:19] Starting 'default'...
[14:28:19] Finished 'default' after 116 μs

Nothing actual is happening here, because the task is empty, but everything seems to run fine.

The API

Gulp's API is very lightweight and simple. It just has 4 top level functions

  1. gulp.task: Defines your task

    gulp.task(name: String [, deps: Array], callback: Function)
    
  2. gulp.src : Points to files we want to use. It's parameter path takes a glob expression. .pipe can be used to chain it's output into other plugins.

    gulp.src(path: String[, options: Object])
    
  3. gulp.dest: Points to destination for the output files.

    gulp.dest(path: String)
    
  4. gulp.watch: Can be used to watch files for changes and run the tasks accordingly.

    gulp.watch(path: String[,options: Object], task: Array|Function)
    

    For more detailed explanation have a look at its API docs.

Running tasks

Running a task is simple. In your command prompt type gulp [task name]. When you omit the task name, gulp will look for a task named default and try to run it. Thus it is good idea to have your most used task named as default.

Simple Copying

Let's say you want to copy all .html files from source folder to public folder. You can simply write the following code:

gulp.task("copy", function(){
    gulp.src("source/*.html")
       .pipe(gulp.dest("public"))
});

Now running gulp copy in your terminal will copy all the .html files. You must see something similar:

[14:32:32] Using gulpfile ~/projects/gulp/gulpfile.js
[14:32:32] Starting 'copy'...
[14:32:32] Finished 'copy' after 16 ms

This must be enough to understand basics of gulp. In the next post we will have a look at compiling LESS files to CSS, Watching files for changes and running multiple tasks.

Helical Dashboard Insight 1.0

Jaspersoft is world’s most commonly used Open Source BI software and boasts of more than 4 lakh community user. But many a times we come across situations when some kind of dynamic dashboard needs to be built, some custom input controls needs to be created, some java script or AJAX etc needs to be added, some real time charting needs to be done, or when we need to customize the dashboard with new logo or color or font or size etc. But the same is not possible using Jaspersoft out of the box components. Don’t you worry, keeping all these in mind, Helical has developed its own plugin working on top of Jaspersoft which removes all these limitations, allows the developers to develop dynamic dashboard which are highly developer friendly. Known as “Helical Dashboard Insight (HDI) 1.0”, the plugin allows you to create friendly, powerful and fully featured Dashboards on top of the Jaspersoft Business Intelligence server. Former Jaspersoft Dashboards had several drawbacks from a developer’s point of view.

“Helical Dashboard Insight (HDI)” emerged as a need for a framework that overcame all those difficulties. The final result is a powerful framework.

Heading Jaspersoft Helical Plugin
Dashboard Feature Availability Jaspersoft community version is not having dashboard features Using “Helical Dashboard Insight (HDI)”, even Jaspersoft community version can also have dashboard features.
Dashboard Feature Availability Jaspersoft Enterprise version is having dashboard feature but still dashboard designer is still having lot of limitations as discussed in details below. Using “Helical Dashboard Insight (HDI)” all the limitations can be removed. (point by point details listed below)
Adding new HTML There is no places in Jaspersoft where we can add our own HTML scripts. Thus we don’t have a lot of control on the dashboard and its difficult to control the UI of the same. Using the plugin, HTML code can be added. Hence the entire look and feel of the dashboard, layout changes can be made, color, font, size, images etc can be added/edited/changed at will. Hence the entire look and feel of the dashboard can be controlled using “Helical Dashboard Insight (HDI)”
Using Bootstrap Themes Not possible to use Bootstrap theme within community or enterprise edition of Jaspersoft. Bootstrap themes can be used to create dashboard and infoGraphics.
New Input Control Let’s say we want to create new input control into the dashboard like slider, multi-select dates, last 7/15/30 days selection, YTD etc Most of the commonly used input controls are already built into the “Helical Dashboard Insight (HDI)”. If the input control is not present then the same can be added very easily by merely adding into the html document.
Real Time Charting It’s not possible to develop real time report/dashboard with Jaspersoft. Maximum using setinterval predefined time can be set and at those times the chart will get updated. Thus not only this is inefficient and inflexible, but also at the setinterval database is being queries again and again, thus leading to lower performance Very easily possible using “Helical Dashboard Insight (HDI)”. The plugin takes care of the same using websockets. The chart updation will happen on realtime as soon as the same happens in the database. Also this will result in absolutely no load on the database.
Plugin Designing Plugin designing in most of the cases not possible in Jaspersoft. Most of the things are not developer friendly in this case. There are two kind of plugin designing we can do using our plugin. One is frontend plugin which can be done using HTML. The development of backend plugin can be done using Java Scripts. Hence a developer is having the flexibility to do almost anything he wants.
Adding new chart /visualization Adding a new chart or visualization which is not out of the box is very tedious job in Jaspersoft with an effort of multiple days involved. Adding a new chart is extremely easy with just adding of the code in one of the file.
Adding new AJAX AJAX is often used to update only certain section of a website which undergoes changes rather than entire page. Again adding of AJAX in Jaspersoft dashboard is not possible, hence anything like auto-refresh in case of data change is not possible. Usage of AJAX is very much possible in our case. Thus it’s possible to create dynamic self loading dashboards/charts in case of any changes. Also we can create chart which will fetch data and load on clicking of any other button without refreshing the page. Calling of multiple dashboards on any click event is a cake walk now.
Adding Java Script Javascript which is often used to add dynamicity like hover information, making a panel appear/disappear, rollover, crossover etc. Adding java scripts is not possible in Jaspersoft. Using our plugin, it’s very easy to add any new java scripts and thus we can make the dashboard extremely dynamic.
Adding new Javascripting Charts Jaspersoft does not support adding new javascript chart. Many of the leading market available charts like D3, Protovis, Raphael etc which are java charting libraries, it’s just not possible to use those charts inside Jaspersoft. This is also very much possible using our plugin. All we need to do is add the code inside one of the files and thus any new chart can be easily added.
Adding new resource Only those resources can be used which have been provided by Jaspersoft. There is no flexibility to add our own resources. Using java scripts, we can easily create and add our own new resources. Resources could be images, css, javascript, input control, external css, etc.
Managing and maintenance of internal resource It’s also possible in Jaspersoft to some extent but with some limitations and also there is hardly any flexibility in managing those resources. With the plugin, we can map directly input controls with various panels, can hide them, enable and disable, on click of submit button triggering/rendering of selected panels and not the entire dashboard is possible
Creation of dynamic dashboard In Jaspersoft, a dashboard can only contain a report or adhoc report or a custom URL. Nothing much can be done. With ability to add new charts, add java scripts, add HTML, add ajax, use bootstrap themes, design new plugins etc, extremely intuitive and dynamic dashboards can be created using “Helical Dashboard Insight 1.0”
Implementing Cascading parameters Cascading is possible in Jaspersoft, but there is no flexibility to selectively use them for selected panels. Implementation of cascading parameters within plugin is a cakewalk.
Creating a new button Not possible inside Jaspersoft Button creation is very easily possible, and further actions can be defined what should happen with button click.
Intra Dashboard Communication (IDC) This point means clicking on one panel, the drill down or the details of chart in another panel should change. The communication should happen between panels of dashboard, thus having more flexibility in designing dashboard and more optimal usage of screenspace of dashboard. This thing is not possible inside Jaspersoft. This function can be easily achieved using our plugin “Helical Dashboard Insights (HDI)”.

Please get in touch with us at nikhilesh@helicaltech.com to know about the features in detail, firstlook of the plugin, its integration with Jaspersoft, building dashboard in Jaspersoft community version, some of the feature rich dynamic dashboards demo etc.