browserify |

If you’re not familiar enough with browserify options and features, check out my previous post explaining browserify in-depth.

I love streaming

Gulp is a stream-based project builder. Basically: a bunch of modules that take one input and output something, which is taken by another module etc. until the whole process is done.

First thing to do, create our gulpfile.js at the root of our project and require() what we need: gulp and browserify.
Once, there was a gulp-browserify plugin. It’s still downloadable but it is not maintained anymore so don’t use it. You have to use browserify itself, that’s it.

var browserify = require('browserify');
var gulp = require('gulp');

gulp.task('default', function() {
    console.log('todo');
});

> gulp
[14:16:44] Starting 'default'...
todo
[14:16:44] Finished 'default' after 85 µs

Before throwing lines of code and browserify, let’s explain a bit more how this stream management work with some examples.

Continue reading Gulp is fond of Node streams

I was seeing this name Browserify everywhere but I always found difficult to understand how Browserify work when I was reading blogs or others articles. It was never clear or it was using things I don’t wanted (I wanted to use gulp for instance to build my project, no grunt, no bower, and I knew gulp-browserify was blacklisted). I decided to step into and learn from the beginning what is browserify, and how it works.

You just need to know at least Node and npm to read further.

So, what I only knew at the beginning was that Browserify is used to create a bundle of js files (on which you can apply transforms such as uglify to minify and reactify to convert React .jsx files), and the html just need to reference one file and then you don’t care anymore of what component to include in the page, how to handle dependencies (A needs B, B should be included before A, this kind of stuff).

That what is, all I knew. Now, let’s start from scratch and let’s discover what’s inside.

We will start by using the browserify command line to check how that’s work and we’ll finish with examples having html and differents third party libs such as Highcharts.

Continue reading Browserify in-depth