Sunday, 24 May 2015

Setup Gulp with Browserify

After reading many long-winded posts online about setting up Gulp with Browserify. I have decided to write a basic no-frills example to setup Gulp with Browserify in only two steps. Before we begin I assume you have have some understanding of the terminal, npm and Gulp.

1 - Install dependencies

Firstly, we have to create our ‘package.json’  file and installed all our required dependencies. Run the following commands in the terminal.

npm init -y
npm install -save gulp browserify vinyl-buffer vinyl-source-stream

2 - Gulpfile

Type the following into the gulpfile.js
// ---------------------------------------------------------
// ---------------------------------------------------------
var gulp         = require('gulp'),
    browserify   = require('browserify'),
    source       = require('vinyl-source-stream'),
    buffer       = require("vinyl-buffer");

// ---------------------------------------------------------
// ---------------------------------------------------------
var BASEPATH = "./src";
var BUILDPATH = "./dist";

var jsPaths = {
  jsSrc:BASEPATH + "/js",
  jsDist:BUILDPATH + "/js"

// ---------------------------------------------------------
// JS - dev (BROWSERIFY)
// --------------------------------------------------------------
gulp.task('browserify', function(){
  return browserify({
    entries:jsPaths.jsSrc + jsPaths.jsFile,
  .on("error", $.notify.onError(function(error) {
        return "Browserify Error: " + error.message;

You should now have a bare-bones example of setting up Gulp with Browserify. I hope this post was self-explanatory and easy to understand. If you have any questions feel free to leave a comment below.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP