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:

Advertisements

Babel – Javascript Transpiler

What is Transpiler?

A source to source compiler is called Transpiler or transcompiler.
A compiler translates code from higher level language to lower level programming language, where as transpiler compiles from one language to other or from version to other.

Why are Transpilers Used?

An overview on transpilers on wiki are found here.

  • They are used to modernize the legacy code to next version programming language.
  • For refractoring purpose.

What is Babel?

Babel is javascript transpiler which can be used to compile javascript source.
Babel details are found here.

What Babel offers?

  • Conversion of EcmaScript 2015 & beyond features to javascript supported by browsers.
  • Supports conversion of JSX syntax to React-js javascript components.
  • It comes with pluggable architecture where only required plugin can be executed.

How Babel can be executed?

Babel can be executed in multiple forms, the complete list can be found here.

  • Builtin tools like babel-cli.
  • Build systems.
  • Frameworks.
  • Language APIs.
  • IDEs.

Required Installations

All the required installations can be done via npm.
Install Babel command line, the detailed usage details for CLI are found here

	  npm install babel-cli
	

Babel presets and plugin installation. The complete supported list is found here

	   npm install babel-preset-es2015
	   npm install babel-preset-react
       npm install babel-plugin-transform-object-rest-spread   
	

Usage of Babel

  • Source JSX file – This current example explains the conversion of below es2015 and react jsx features to compatible scripts
    • Es2015 feature – String creation with literal support.
    • Es2015 feature – String interpolation.
    • Es2015 feature – Spread attributes.
    • Es2015 feature – Object spread attributes.
    • Reactjs JSX format.
  • Sample source file
    var React = require('react');
    
    // String creation with literal support
    var mystr = `In JavaScript '\n' is a line-feed.`
    var mymodstr = `In JavaScript
    is a line-feed.`
    
    // String interpolation
    var name = "Bob", time = "today";
    var consolname = `Hello ${name}, how are you ${time}?`
    
    // spread attributes ... is only supported by es2015 modified to Array
    var func = (x, y, ...z) => { console.log(z); return x + y; };
    
    // Object spread attributes need plugins while compilation
    var dataFunc = ({rowIndex, data, col, ...props}) => (
        console.log(data.getObjectAt(rowIndex)[col].toLocaleString())
    );
    
    // The JSX format is converted to js format by babel 
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
    	   
  • Script compilation
    	 babel --presets es2015,react --plugins transform-object-rest-spread ReactJsx.jsx -o ReactJsxMod.js
    	 
  • Resultant source file with browser compatable javascript code
    "use strict";
    
    function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
    
    var React = require('react');
    
    // String creation with literal support
    var mystr = "In JavaScript '\n' is a line-feed.";
    var mymodstr = "In JavaScript\nis a line-feed.";
    
    // String interpolation
    var name = "Bob",
        time = "today";
    var consolname = "Hello " + name + ", how are you " + time + "?";
    
    // spread attributes ... is only supported by es2015 modified to Array
    var func = function func(x, y) {
      for (var _len = arguments.length, z = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
        z[_key - 2] = arguments[_key];
      }
    
      console.log(z);return x + y;
    };
    
    // Object spread attributes need plugins while compilation
    var dataFunc = function dataFunc(_ref) {
      var rowIndex = _ref.rowIndex;
      var data = _ref.data;
      var col = _ref.col;
    
      var props = _objectWithoutProperties(_ref, ["rowIndex", "data", "col"]);
    
      return console.log(data.getObjectAt(rowIndex)[col].toLocaleString());
    };
    
    // The JSX format is converted to js format by babel
    ReactDOM.render(React.createElement(
      "h1",
      null,
      "Hello, world!"
    ), document.getElementById('example'));