Gulp Basic example

What is Gulp

Gulp is simple form is a javascript task runner. For java background developers this is very similar to Ant which helps in build and deployment process more standardised, repeatable and automatic. Gulp is a streaming build system which is built in Node.js. This stream build approach provides flexibility of piping data transformations. Gulp is powered by more than 2000 plugins which helps us web development process simpler and faster.Lets have simple workflow of creating output file involving compilation of jsx scripts, browsification and creating minified output js file.

Gulp Installation:

Gulp can be installed over npm.
Find below the installation of all the required modules for current post.
	npm install --save gulp
	npm install --save gulp-clean gulp-uglify
	npm install --save vinyl-source-stream browserify gulp-streamify gulp-babel
    npm install --save babel-preset-react babel-preset-es2015 babel-plugin-transform-object-rest-spread

Current Project setup:

In the current project, we does the following tasks using Gulp.

  • Compilation of JSX scripts to js format using Babel
  • Combination of various js files into minified output file
myFixedDataTable

Gulp Usage:

The gulp API consists of gulp.src, gulp.dest, gulp.task and gulp.watch

  • gulp tasks: This includes the tasks that need to be executed which can take up to to three parameters. The name of the task, dependent tasks and function to be executed for that task. All the tasks are executed in parallel unless they are configured as dependent tasks.
  • gulp src: This takes the array of input js files which returns a stream which can be piped to plugins.
  • gulp dest: This will create files and can also be piped.
  • gulp watch: This watches the files that are modified and trigger the tasks that need to be executed.

Gulp Plugins:

Gulp has multiple plugins which can be installed via npm. Find below overview of gulp-plugins used for this post.
The complete details of gulp plugins can be found here.

  • gulp-clean: This plugins deletes the configured directory.
  • gulp-uglify: This includes the js minification process on input files.
  • vinyl-source-stream: This helps in transformations of the input files to streams and piping the streams.
  • browserify: This converts the js code with require methods to browser compatible form and also create the bundled output.
  • gulp-streamify: This converts stream to buffer.
  • gulp-babel: Compiles the JSX code to browser compatible js format.

Gulp JS file:

Find below the gulp js file.
var gulp = require('gulp');
var clean = require("gulp-clean");
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var streamify = require('gulp-streamify');
var babel = require('gulp-babel');

var path = {
  HTML: 'src/index.html',
  JSX: ['src/js/*.jsx', 'src/js/**/*.jsx', 'src/js/**/*.js', 'src/js/*.js'],
  MINIFIED_OUT: 'output-min.js',
  OUT: 'output.js',
  DEST: 'dist',
  DEST_BUILD: 'dist/build',
  DEST_BUILD_UNUGLI: 'dist/build',
  COMPILE_DEST_BUILD: 'dist/compiled',
  DEST_SRC: 'dist/src',
  ENTRY_POINT: 'dist/compiled/objectdisplay.js'
};

gulp.task('compile', ['clean'], function () {
	return gulp.src(path.JSX)
		.pipe(babel({
			presets: ['es2015', 'react'],
			plugins: ['transform-object-rest-spread']
		}))
		.pipe(gulp.dest(path.COMPILE_DEST_BUILD));
});

gulp.task('build', ['compile'], function(){
  browserify({
    entries: [path.ENTRY_POINT]
  })
    .bundle()
    .pipe(source(path.MINIFIED_OUT))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest(path.DEST_BUILD));
	console.log('build executed');
});
s
gulp.task('clean', function () {
	return gulp.src(path.DEST)
		.pipe(clean());
});

gulp.task('default', ['build']);

Wrapping Current Post:

The below are the steps that are executed in order as per gulp.js

  • The path is defined with all the input and output directories/files.
  • The default task is build, which has dependent task as compile and it has dependent task as clean.
  • The clean task deletes the output dist directories/files.
  • The compile task compiles react JSX syntax and ecmascript 2015 syntax to browser acceptable js.
  • The browserify process identifies the dependent js files based on input configuration and bundles into output file.
  • The uglification process compresses into minified js file.

Also Read:

Download Node modules in Eclipse work space

Overview

This post provides details on how the node modules can be downloaded into Eclipse workspace.

Pre-requisites:

  • Install node eclipse on Local machine.
  • Install node eclipse plugin as described here.

Node Modules download steps:

  • Create package.json file.
  • List out the modules to be downloaded as dependencies.
  • Right click on package.json and run as npm install.
  • All the required modules will be downloaded to Eclipse workspace.
   {
   "name": "demo-eclipse",
   "version": "0.0.1",
   "private": true,
   "dependencies":{
	   "gulp":"3.9.0",
	   "del":"*",
	   "gulp-babel":"*",
	   "babel-preset-es2015":"*",
	   "babel-preset-react":"*",
	   "babel-plugin-transform-object-rest-spread":"*",
	   "browserify":"*",
	   "gulp-uglify":"*",
	   "vinyl-source-stream":"*",
	   "gulp-streamify":"*",
	   "react":"*",
	   "fixed-data-table":"*",
	   "faker":"*",
	   "react-dom":"*"   
    }
   }   
   
Refer Node Modules screenshot below:
nodeModules

 

 

 

Also Read:

Basic NodeEclipse Setup

Overview

Eclipse is an IDE which is built in java and is mostly used for java development. Eclipse also supports multiple other languages through use of plugins.
Eclipse has some of the javascript plugins which aid in javascript development.
In recent years node.js has become one of the major platform for building javascript applications. NodeEclipse is an Eclipse plugin for node.js.

NodeEclipse Installation:

  • Install node js on Local machine.
  • Click Eclipse Help -> Eclipse Market place.
  • Type Node under Find and Click GO.
  • In the displayed list select NodeEclipse and click Update/Install.
  • Select the relevant packages and click Next and finally install.

Configuring NodeEclipse:

On successful installation of Node Eclipse, we need to configure it via Eclipse -> Window -> Preferences

  • Under preferences we see NodeEclipse.
  • On click of NodeEclipse, we have all the configuration details for Node.js running used from eclipse.
  • Revalidate Node.js path and click OK.

Conclusion:

After above setup, Node.js based programming can be used from eclipse itself.