Browserify With Babel is Babelify -Tutorial Savvy

Babel is a JavaScript Compiler.It transform the futuristic javascript(new features and syntax) to the javascript that is supported by browser.It helps developers to use new features/syntaxes of javascript without worry about the browser support.
If you want to know more about Babel checkout my previous post in this link.
Browserify provides a way to use the NPM modules (published for NodeJS server side programming) in the client/browser environment.This statement hinting to a new area of application development where code base can be shared to both server-client and termed ad Isomorphic JavaScript.Browserify provides the feature of using require() method for the client side JavaScript and bundling up of all dependencies together.
If you want to know more about Browserify checkout my previous post in this link.
The gulp-connect is a Gulp plugin to run a web server with LiveReload for easy development.
In this demo, “We will learn to use Babelify to transform the new features of javascript to browser supported javascript”.
The Gulp module can be installed locally using npm install gulp –save-dev command.The following screenshot shows the terminal with Gulp installation:-

The Babelify module can be installed using npm install babelify –save-dev command.The following screenshot shows the terminal with Babelify installation:-

The gulp-browserify module can be installed using npm install gulp-browserify –save-dev command.The following screenshot shows the terminal with gulp-browserify installation:-

The gulp-connect module can be installed using npm install gulp-connect –save-dev command.The following screenshot shows the terminal with gulp-connect installation:-

The gulp-sourcemaps module can be installed using npm install gulp-sourcemaps –save-dev command.The following screenshot shows the terminal with gulp-sourcemaps installation:-

To demonstrate we have create a project name BrowserifyBabelDemo.The following screenshot shows the initial structure of this project:-

The src/operation.js file contains 2 methods addition and multiplication. Both of these methods takes input as spread variable.A spread variable is prefixed with ellipsis(…) symbol. spread operator is the new feature in ES6.To know more about spread operator check my previous post in this link.The content of src/operation.js file are as follows:-

"use strict";
export function addition(...numbers) {
    let sum = 0;
    numbers.forEach(function (value) {
        sum+=value;
    });
    return sum;
};

export function multiplication(...numbers) {
    let mul = 1;
    numbers.forEach(function (value) {
        mul*=value;
    });
    return mul;
};

The src/app.js file contains code to import these 2 methods addition and multiplication from operation.js file and pass some input numbers to these method.Finally the results of these methods are rendered in browser.The content of src/app.js file are as follows:-

import {multiplication,addition} from "./operation";
let mulResult = multiplication(2,7,3);
let message1 = `<h2>Multiplication Result ${mulResult}</h2>`
let addResult = addition(2,7,3);
let message2 =`<h2>Addition Result ${addResult}</h2>`

document.body.innerHTML = message1 + message2;

The gulpfile.js contains the code for defining Gulp tasks.It calls the Browserify and uses the babelify transform to convert the futuristic JavaScript code to the supported version of javascript and stores it to dist directory.The content of gulpfile.js are as follows:-

var gulp = require('gulp'),
    babelify = require('babelify'),
    sourcemaps = require('gulp-sourcemaps'),
    browserify = require('gulp-browserify'),
    connect = require('gulp-connect');
gulp.task('babel', function () {
    return gulp.src(['src/*.js'])
        .pipe(sourcemaps.init())
        .pipe(browserify({
            transform:['babelify']
        }))
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload());
});
gulp.task('babel:watch', function () {
    gulp.watch('src/*.js', ['babel']);
});
gulp.task('connect', function() {
    connect.server({
        livereload: true,
        port: 8888
    });
});
gulp.task('default',['connect','babel','babel:watch']);

The index.html file contains HTML markup to display in browser.The content of index.html file are as follows:-

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Browserify with Babel Babelify Demo</title>
</head>
<body>
    <h3>
        Result is : <span id="result"></span>
    </h3>
</body>
    <script src="dist/app.js"></script>
</html>

Now we can run the gulp task using gulp command.The following screenshot shows the terminal with Gulp task in execution:-

On successful execution of Gulp task it will generate dist/app.js and dist/operation.js file.The following screenshot shows the updated structure of this project:-