Browserify

Syntax

browserify(paths)

Description

Browserifies the specified paths.js file and outputs to paths.build.

If --production is specified it also uglifies the output script.

Use a single js entry point with all requires.

If gulp watch then the task also watches changes in the bundled requires.

Quick reference

Quick reference to browserifying common front-end packages.

Alternatively use the JS concatenate task.

Notation used below:

  • npm package: Install the npm package
  • index.js: Require the package in the entry js using the provided code
  • gulpfile path: Additional paths to include in gulpfile build

jQuery

Bootstrap

  • npm package: bootstrap
  • index.js: require('bootstrap');
  • gulpfile assets path: 'node_modules/bootstrap/dist/*fonts/*'
  • gulpfile css path: 'node_modules/bootstrap/dist/css/bootstrap*(|-theme).css'
  • html5shiv: either ignore or leave as is
  • Browserify with Bootstrap

Angular

Lightbox2

  • npm package: lightbox2
  • index.js: require('lightbox2');
  • gulpfile css path: 'node_modules/lightbox2/dist/css/lightbox.css'

animate.css

  • npm package: animate.css
  • gulpfile css path: 'node_modules/animate.css/animate.css'
  • No js file

wow.js

  • dependencies: animate.css

  • npm package: wow.js

  • Browserify-shim

    • package.json:

      "browserify": {"transform": [ "browserify-shim" ]},
      "browser": {
        "wow": "./node_modules/wow.js/dist/wow.js"
      },
      "browserify-shim": {
        "wow": {"exports": "WOW"}
      }
      
    • index.js:

      var WOW = require('wow');
      new WOW().init();
      

Font awesome

  • npm: font-awesome
  • gulpfile assets path: 'node_modules/font-awesome/*fonts/*'
  • gulpfile css path: 'node_modules/font-awesome/css/font-awesome.css'
  • No js file

Normalize.css

  • npm: normalize.css
  • gulpfile css path: 'node_modules/normalize.css/normalize.css'
  • No js file

Swiper

  • npm: swiper
  • js: require('swiper');
  • gulpfile css path: 'node_modules/swiper/dist/css/swiper.css'

Puse icons

  • npm: puse-icons-feather
  • gulpfile asset path: 'node_modules/puse-icons-feather/*fonts/*'
  • No js file

Browserify-shim

Packages that are not CommonJS compatible require a relative entry in package.json, as described above. The following entry is also required:

"browserify": {
  "transform": ["browserify-shim"]
},

The browserify-shim package is already included in gulpfile-ninecms dependencies.

Example

var paths = {
  js: 'private/javascripts/index.js',
  build: 'build/'
};

var gulp = require('gulp');
var taskMethods = require('gulpfile-ninecms');

var tasks = {
  browserify: function () { return taskMethods.browserify(paths); }
};

gulp.task('browserify', [], tasks.browserify);