Incremental build of browserify and parcelify by gulp-watchify

Posted: 2016-12-14, Modified: 2016-12-14   gulp browserify parcelify watchify JavaScript

Summary

watchify supports incremental build to reduce building time, and gulp-watchify is a gulp plugin of watchify. This post explains how to apply watchfy to browserify and Parcelify with gulp.

gulp-watchify

From a sample file, basic usage is

gulp = require "gulp"
$ = require("gulp-load-plugins")()
watching = false

gulp.task "browserify", $.watchify (watchify) ->
  gulp.src "src/*.js"
    .pipe watchify
      watch:watching
    .pipe gulp.dest "public/js/"

gulp.task "watch", ->
  watching = true

By this task file, gulp browserify builds normally, and gulp watch browserify starts watching script files to incremental build.

Note that installing gulp-watchify doesn’t install watchify, and you need to run

$ npm i —save-dev watchify gulp-watchify

Use parcelify

gulp-watchify takes callback functions which will be called before bundling. We use parcelify in the callback function.

gulp = require "gulp"
parcelify = require "parcelify"
$ = require("gulp-load-plugins")()
watching = false

gulp.task "browserify", $.watchify (watchify) ->
  gulp.src "src/main.js"
    .pipe watchify
      extensions: [".js"]
      watch: watching
      setup: (bundle) ->
        parcelify bundle,
          bundles:
            style: "public/css/bundle.css"
    .pipe $.rename "bundle.js"
    .pipe gulp.dest "public/js/"

gulp.task "watch", ->
  watching = true

This task file reads main.js as the entry script and outputs bundle.js. To rename file names, it requires gulp-rename, too.

watchify takes same options as ones browserify takes. The above example takes extensions.