Optimize your compilations with Gulp, Browserify and Watchify
Browserify is becoming more and more a viable solution for developing scripts JS and proposing a syntax modeled on that of Node.js. Compile scripts with Browserify Is simple. During developments, the use of Watchify allows you to compile files on the fly. Despite this, when you want to integrate your compilation with other tasks Gulp (like compiling files Less), you run into a problem: how to use watchify at the same time gulp-watch. Answer in this article!
In this section:
Use Gulp and Browserify – Level 0
Use Gulp et Browserify is quite simple. You can use the Browserify API or go simpler and use gulp-browserify which will allow you to compile your files easily.
|
1
2
3
4
5
6
7
8
|
const gulp= require('gulp');
const browserify= require('gulp-browserify');
gulp.task('js', function() {
gulp.src('src/*.js', { read: false })
.pipe(browserify())
.pipe(gulp.dest('./build/'))
});
|
The problem you quickly encounter is that to work on your files and have them re-compiled on the fly, you will have to parse all the files. This is very expensive. Browserify will have to load all your files but also all the dependencies you use. The bigger your project gets, the faster the time will go. Additionally, if you use transformed as Babelify times will swell even faster (List of all plugins available via Babel). Also the list of all Browserify transforms.
Before I show you the final solution, here's what a solution would look like with the classic gulp-watch.
|
1
2
3
4
5
|
gulp.task(“watch”, function () {
gulp.watch(“./src/*.js”, [“js”]).we("change", function(event) {
consul.log(`File ${event.path} Has Been ${event.type}`);
});
});
|
With this solution, each time you change one of your files, a whole compilation is launched.
Watchify
Watchify makes it efficient to compile your files with Browserify. It will keep in memory the result of the compilation of each file (all the files linked to your file such as dependencies…).
When a file is updated, it updates the just-modified file fingerprint and generates a bundle without parsing all of your dependencies.
Use Gulp, Browserify and Watchify – Level ∞
Installing Node.js dependencies
You can install them with Yarn (if you're really up to date 🙂)!
|
1
|
$ yarn add browserify gulp vinyl-buffer vinyl-source-stream watchify –dev
|
Otherwise, you're using good old NPM 🙉
|
1
|
$ npm install browserify gulp vinyl-buffer vinyl-source-stream watchify --save-dev
|
gulpfile.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
;
const browserify= require(“browserify”),
buffer = require("vinyl buffer"),
gulp= require(“gulp”),
path= require(“path”),
source = require(“vinyl-source-stream”),
user = require(“gulp-util”),
watchify= require(“watchify”),
src = {
js: “./src/main.js”
},
destination = {
js: “./build/”
};
flight bundler;
function bundles(profile) {
if (bundle === undefined) {
if (profile === “watch”) {
bundler = watchify(browserify(src.js));
} else {
bundler = browserify(src.js);
}
}
bundle();
}
function bundle() {
flight start= new Date:().getTime(),
_ = bundler
.bundle()
.we("Error", util.log.bind(util, “Browserify Error”))
.pipe(source(“main.js”))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
time= new Date:().getTime() – start;
util.log("[browserify] rebundle took" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
return _;
}
gulp.task(“js”, bundles.bind(null));
gulp.task(“watch”, function () {
bundles(“watch”);
bundler.on("Update", bundle.bind(null));
});
gulp.task(“default”, [“watch”, “js”]);
|
Here you have an extremely simplified but functional example. This code could be further simplified but it shows you a sketch of the code to produce to handle a hot reload effective.
To simplify your task, I provide you with an archive with a guplfile.js more complete, which handles compiling files JavaScript with Babel (and presets like ES2015) but also files Less while managing profiles like for sustainable with or without watch but also production with minification!
Conclusion
It is quite possible to use Browserify effectively with Gulp provided you play with API. This forces you to go a little off the beaten track and do without plugins Gulp that we usually use.
