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

Gulp Usage:

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

  • 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)
			presets: ['es2015', 'react'],
			plugins: ['transform-object-rest-spread']

gulp.task('build', ['compile'], function(){
    entries: [path.ENTRY_POINT]
	console.log('build executed');
gulp.task('clean', function () {
	return gulp.src(path.DEST)

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: