Roots v3 extension that uses browserify as a javascript pipeline
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Roots Browserify

npm tests coverage dependencies

Roots browserify is an alternate javascript pipeline that uses commonjs and browserify to build and concatenate scripts.

Note: This project is in early development, and versioning is a little different. Read this for more details.


  • make sure you are in your roots project directory

  • npm install roots-browserify --save

  • modify your file to include the extension, as such

    browserify = require('roots-browserify')
    module.exports =
      extensions: [browserify(files: "assets/js/", out: 'js/build.js')]


This extension very directly uses browserify's javascript API under the hood. For basic usage, pass either a string with a file path or an array of file path strings as entry points for browserify, and an output path where all the concatenated scripts should be written, as shown in the example above.

Injecting script into views

When you use this extension, it wille expose a function called browserify to all your view files. When you call this function, the extension will drop in one script tag pointing to your script.

The browserify function accepts one optional argument, which is a path to prefix any injected scripts with. So for example if you wanted to have the script load from the root of the site, you could pass in /. By default it would be the relative path js/build.js, but calling with / would make it /js/build.js.

Here's an example of using the browserify function. This example uses jade but this will also work with any other templating lagnuage.

//- index.jade
p here's my great website
!= browserify()

Now let's take a look at some sample output. With this configuration:

browserify = require 'roots-browserify'

module.exports =
  extensions: [browserify(files: 'assets/js/', out: 'js/build.js')]

You would see this output.

<!-- pulic/index.html -->
<p>here's my great website</p>
<script src="js/build.js"></script>



String or array of strings pointing to one or more file paths which will serve as the base. See browserify docs for more info.


Generates an inline sourcemap, external if minify is true. Default is false.


Minfifies the output. Default is false.


Any additional options you'd like to be passed in to browserify. Again, documented here. Default is { extensions: ['.js', '.json', '.coffee'] }.


Where you want to output your built js file to in your public folder (or whatever you have set output to in the roots settings). There is no default. Recommended is js/build.js


If you'd like to add additional custom transforms, you can do it through this option. Pass either a transform function or an array of functions and they will be included in the pipeline. Default is coffeeify (add that string to your array if you want to keep coffeeify as well, otherwise it will be overridden).

License & Contributing