Skip to content

Commit

Permalink
Add browserify injector (#24)
Browse files Browse the repository at this point in the history
* add tests for browserify func
* Add a browserify local function
   This function auto-injects the file built by the browserify extension.
* document new browserify() function.
* test for both prefixed & unprefixed paths in the output.
  • Loading branch information
SevereOverfl0w authored and jescalan committed Dec 13, 2016
1 parent cc9a28e commit ec28e9d
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 0 deletions.
30 changes: 30 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,36 @@ Roots browserify is an alternate javascript pipeline that uses commonjs and [bro
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](http://jade-lang.com/) but this will also work with any other templating lagnuage.
```jade
//- index.jade
p here's my great website
!= browserify()
```

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

```coffee
# app.coffee
browserify = require 'roots-browserify'

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

You would see this output.
```html
<!-- pulic/index.html -->
<p>here's my great website</p>
<script src="js/build.js"></script>
```

### Options

##### files
Expand Down
7 changes: 7 additions & 0 deletions lib/index.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,16 @@ module.exports = (opts) ->
@b.on 'package', (pkg) =>
@pkg_cache[path.join(pkg.__dirname, 'package.json')] = pkg

@roots.config.locals ?= {}
@roots.config.locals.browserify = (prefix = '') ->
"<script src='#{prefix}#{opts.out}'></script>\n"


@b.transform(t) for t in opts.transforms
if opts.minify then @b.transform(uglifyify, { global: true })



###*
* Gets the dependency graph of required files so we can ignore them
* from the compile process.
Expand Down
5 changes: 5 additions & 0 deletions test/fixtures/path-prefix/app.coffee
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
browserify = require '../../..'

module.exports =
ignores: ["**/_*", "**/.DS_Store"]
extensions: [browserify(files: "index.coffee", out: "build.js")]
1 change: 1 addition & 0 deletions test/fixtures/path-prefix/index.coffee
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log 'wowe, such test.'
2 changes: 2 additions & 0 deletions test/fixtures/path-prefix/index.jade
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
!= browserify('../')
!= browserify()
7 changes: 7 additions & 0 deletions test/fixtures/path-prefix/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "test",
"dependencies": {
"coffee-script": "^1.10.0",
"jade": "^1.11.0"
}
}
9 changes: 9 additions & 0 deletions test/test.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -184,3 +184,12 @@ describe 'cacheing in watch mode', ->
, 3000

it 'invalidates the cache when a file changes'

describe 'path-prefix', ->

before (done) -> compile_fixture.call(@, 'path-prefix', -> done())

it 'should include the build.js with & without prefix', ->
out = path.join(@public, 'index.html')
h.file.contains(out, "<script src='../build.js'></script>").should.be.ok
h.file.contains(out, "<script src='build.js'></script>").should.be.ok

0 comments on commit ec28e9d

Please sign in to comment.