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
// ---------------------------------------------------------
// DEPENDENCIES
// ---------------------------------------------------------
var gulp         = require('gulp'),
    browserify   = require('browserify'),
    source       = require('vinyl-source-stream'),
    buffer       = require("vinyl-buffer");


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


var jsPaths = {
  jsFile:"app.js",
  jsSrc:BASEPATH + "/js",
  jsDist:BUILDPATH + "/js"
}


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

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.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP