skrajewski/laravel-elixir-browserify

Laravel Elixir Browserify Extension

Laravel Elixir Browserify

Highly customizable browserify extension for laravel elixir. Includes support for transforms, watchify and multiple bundles.

❗️❗️ IMPORTANT NOTE ❗️❗️

Work to this package was abadonded. No further updates will be perfomed. Consider use the official package. Thanks for all contributors for their support.

---

• Install
• Usage
  • Example Gulpfile.js:
  • Advanced example
  • Watchify
  • Multiple bundles
  • Custom task name
• Changelog
• License

Install

npm install --save-dev laravel-elixir-browserify

Usage

Example Gulpfile.js:

var elixir = require('laravel-elixir');
var browserify = require('laravel-elixir-browserify');

elixir(function(mix) {
    // make sure this line is inside of elixir callback function
    // to replace default browserify task
    browserify.init();

    mix.browserify("bootstrap.js");
});

First argument is the entry point of your application (default directory is resources/assets/js). In second argument you could pass plugin options and browserify options.

Advanced example

var elixir = require('laravel-elixir');
var browserify = require('laravel-elixir-browserify');

elixir(function(mix) {
    browserify.init();

    mix.browserify("bootstrap.js", {
    	debug: true,
    	insertGlobals: true,
    	transform: ["debowerify"],
    	output: "public/js",
    	rename: "bundle.js"
    });
});

Watchify

If you want to use watchify for browserify just run gulp watchify instead of standard gulp watch command. Elixir's watch task is a dependency of watchify and will also be run.

var elixir = require('laravel-elixir');
var browserify = require('laravel-elixir-browserify');

elixir(function(mix) {
    browserify.init();

    mix.browserify("bootstrap.js");
});

Multiple bundles

var elixir = require('laravel-elixir');
var browserify = require('laravel-elixir-browserify');

elixir(function(mix) {
    browserify.init();

    mix.browserify("admin.js")
        .browserify("app.js", { transform: ["reactify"] })
});

Custom task name

Laravel Elixir has own browserify task, but this plugin replaced him. If you want to use both tasks or maybe you want to rename it you can pass name argument to the init(name) method.

var elixir = require('laravel-elixir');
require('laravel-elixir-browserify').init("bundler");

elixir(function(mix) {
    mix.bundler("bootstrap.js");
});

Changelog

0.8.1

• Updated browserify

0.8.0

• Resolved conflicts with browserify elixir task
• Better watchify integration

0.7.0

• Added multiple bundles support (thanks for @Daveawb)
• Added watchify support (thanks for @Daveawb)

0.6.0

• Removed second argument (destination directory) and add output option.
• Fixed browserify transforms (vinyl-transform replaced by vinyl-source-stream and vinyl-buffer)

0.5.0

• Default bundle file has the same name as input file. Use rename option to change it.

0.4.1

• Renamed the helpers folder to commands

0.4.0

• Replace blacklisted gulp-browserify with browserify and vinyl-transform packages (thanks for @JoeCianflone).
• Removed default debowerify transform.

License

The MIT License. Copyright (c) 2015 - 2017 by Szymon Krajewski and many contributors.

laravel-elixir-browserify's Issues

[Laravel Elixir] Error: write after end

I'm getting an error when trying to run a transform.

My gulpfile looks like this:

var elixir = require('laravel-elixir'),
    reactify = require('reactify');

require('laravel-elixir-browserify');

elixir(function(mix) {
    mix.browserify("app.js", "public/js", {debug: true, insertGlobals: true, transform: [reactify]});
});

And I get this output from gulp:

[11:53:48] Starting 'default'...
[11:53:48] Starting 'browserify'...
[11:53:48] Finished 'default' after 8.83 ms
[11:53:48] gulp-notify: [Laravel Elixir] Error: write after end
[11:53:48] Finished 'browserify' after 38 ms

I get the same error when substituting reactify for debowerify, which it mentioned in the advanced example in the readme.

gulp-browserify has been deprecated or blacklisted or something

I just installed your plugin and I'm getting an NPM warning telling me that gulp-browserify is no longer being maintained.

npm WARN deprecated [email protected]: package is no longer maintained

If you go to that repo there's a big message in the readme about this.

Making it pipe

I'm trying to use this plugin together with the versioning one provided with elixir. Problem is the two don't pipe together. Any clue on how I could fix it? Is it a package problem or something different?

Also watch .jsx files

Thank God you've made this.
The default elixir browserify task is so rubbish it's painful.

Anyway, can you add support for watching .jsx files aswell (reactjs files)?

Allow different file extensions to be watched

I'm using this to run vueify and I'm wondering if you could make an option that would let me define the file extensions I want to watch and if not defined just default to .js.

In this case I want to watch for .vue files.

https://github.com/skrajewski/laravel-elixir-browserify/blob/master/index.js#L83

gulpfile.js

var elixir = require('laravel-elixir');
var vueify = require('laravel-elixir-browserify').init("vueify");

elixir(function(mix) {
    mix.sass('app.scss');
    mix.vueify('app.js', {
        insertGlobals: true,
        transform: "vueify",
        output: "public/js"
        extensions: 'js,vue'
    });
});

Maybe the extension options equates to something like **/*.{js,vue} otherwise defaults to **/*.{js}.

Multiple Bundles

As it stands right now, it's not possible to create multiple bundles, since multiple mix.browserify() calls only actually bundles the last call.

To get around this I refactored the plugin to allow for passing multiple bundle configs as the src param. This works, but it's kinda hacky, and it would work much better if the plugin only required a single param (which could optionally be an array of configs) instead of the current: src, options.

I can submit a PR with either method if you'd like, the current way is backwards compatible, the latter (but better) method would be a breaking change.. thoughts?

Watching not working with 0.7.0

Watching was working fine with 0.6.0 but I've been waiting for the multiple bundles feature for a while so I updated to 0.7.0.

That feature works fine, but watching no longer works. I followed the docs, added .watchify() below my .browserify() call, and use gulp watchify to trigger watching, but when I save the files with changes nothing happens on terminal. All of the other watchers (sass, etc) trigger as usual though.

gulp --production runs forever with no output

Whenever I run gulp with the --production flag set, it runs other Javascript task but hangs when trying to compile Vue specific files.

Make Watchify optional

There should be a way to make watchify optional for cases like mine (NFS mount) where it cannot be used. It should have the option to use the default elixir watcher as previous versions.

How to include browserify presets?

When using default browserify from Elixir it runs my installed presets automatically (I guess), but this plugin don't.

I have babel-preset-react in my package.json and the default browserify correctly transforms my JSX file. How can I add this preset to this plugin?

Fails using current version of elixir

This extension no longer works using the current version of elixir, as the built in browserify task overrides this one during compilation. Even though elixir now includes browserify support, it does not allow multiple bundles or watchify support, so this extension is still very much useful but currently unusable without changing the name registered via the extend method.

Component Recursion Fails

I'm trying to run this: http://vuejs.org/examples/tree-view.html in a vueified manner

If I have the tree component, item.vue, and I try to import and use item.vue inside that file, watchify succeeds with no errors.

It should probably warn about infinite recursion or something?

Anyway, any ideas on how to use recursive components in this manner?

Failing on Elixir 3.0.0

I'm receiving this error:

Error: Cannot find module 'laravel-elixir/ingredients/commands/Utilities

Running this gulp file

var elixir = require('laravel-elixir');
var browserify = require('laravel-elixir-browserify');


elixir(function(mix)    {
    browserify.init();

    mix.sass('app.scss');
    mix.browserify('widgets.js', {output : 'public/js', rename : 'widget.js'});
 });

I did some googling on the error message and found that a lot of elixir plugins ran into a similar error when the helpers directory was changed to the commands directory. I'm not sure if a similar change recently happened that's causing this issue or if something is set up wrong on my end.

Bundle multiple files

I tried using this with multiple files (with debowerify), but it does not work. Any chance of it being supported in the future?

Watchify as a task. Does it really make sense?

Hi!

Executing watchify as a task doesn't make sense to me. I think it should be triggered only when "gulp watch" is called.

Not sure if this can be done with the current elixir API, though...

Watchify doesn't "watch"

Running watchify now does not run the watch task.

The watchify task runs the tasks to watch once but then does nothing as it does not actually run the watch task, hence none of the watchers are invoked.

gulp.task('watchify', function() {
    config.useWatchify = true;

    srcPaths = config.watchers.default;
    tasksToRun = _.intersection(config.tasks, _.keys(srcPaths).concat('copy'));

    inSequence.apply(this, tasksToRun.concat('watch-assets'));
});

In my original PR, watchify depended on watch for this reason.

gulp.task('watchify', ['watch'], function() { ... });