Laravel 5 extend Elixir to include browserify

Question

My browserify workflow (from coffee to js, with browserify-shim and coffeeify) is like this:

I have 2 main files, app.coffee and _app.coffee, respectively for frontend and backend. Both files located in resources/coffee/front and resources/coffee/back (respectively). I'm trying to include browserify task in laravel elixir so the result file will be on public/js/app.js and public/js/_app.js and can be revision to the build folder later.

So far, I have tried to extend the elixir by creating a browserify.js file in elixir's node_modules ingredients folder. The content is:

var gulp                =   require('gulp');
var browserify  = require('browserify');
var watchify        = require('watchify');
var source          =   require('vinyl-source-stream');
var logger          =   require('../../../gulp/util/bundleLogger');
var errors          =   require('../../../gulp/util/handleErrors');
var config          =   require('../../../gulp/config').browserify;

elixir.extend('browserify', function(callback) {
    var bundleQueue = config.bundleConfigs.length;
    var browserifyThis = function(bundleConfig) {
        var bundler = browserify({
            cache: {},
            packageCache: {},
            fullPaths: true,
            entries: bundleConfig.entries,
            extensions: config.extensions,
            debug: config.debug
        });

        var bundle = function() {
            logger.start(bundleConfig.outputName);

            return bundler
                .bundle()
                .on('error', errors)
                .pipe(source(bundleConfig.outputName))
                .pipe(gulp.dest(bundleConfig.dest))
                .on('end', finished);
        }

        if (global.isWatching) {
            bundler = watchify(bundler);
            bundler.on('update', bundle);
        }

        var finished = function() {
            logger.end(bundleConfig.outputName);
            if (bundleQueue) {
                bundleQueue--;
                if (bundleQueue === 0) {
                    callback();
                }
            }
        }

        return bundle();
    };

    config.bundleConfigs.forEach(browserifyThis);
});

Config for browserify is:

browserify: {
        debug: true,
        extensions: ['.coffee'],
        watch: './resources/assets/coffee/{front,back}/**/*.coffee',
        bundleConfigs: [
        {
            entries: './resources/assets/coffee/front/app.coffee',
            dest: './public/js',
            outputName: 'app.js'
        },
        {
            entries: './resources/assets/coffee/back/app.coffee',
            dest:  './public/js',
            outputName: '_app.js'
        }]
    }

Then in my gulp elixir task, I do this:

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

gulp.task('elixir', function() {
    return elixir(function(mix) {
        mix.sass('app.scss').browserify().version(['.public/css/app.css', './public/js/app.js', '.public/js/_app.js']);
    });
});

This does not work because the callback function is not included in elixir (originally it is gulp's). Even if it is, the elixir watch will not listen to my original .coffee files (I'm trying to watch the entire coffee file located in resources/coffee/**/*.coffee).

So what I have thought as a solution is to re-run the entire elixir procedure if the file changed, like:

gulp.task('default', function() {
    runSequence('coffeelint', 'browserify', 'elixir', 'images', 'watch');
});

and my watch task:

gulp.task('watch', function() {
    gulp.watch(config.browserify.watch, ['coffeelint', 'default']);
    gulp.watch(config.images.src, ['images']);
});

But the error is that, it says that sass() function in elixir cannot be linked to browserify(). Any idea how to do this?

Answer 1

Laravel elixir comes bundle with browserify so no need to do a require of browserify what you can do is

elixir(function(mix) {
    mix.browserify(['main.js'], 
                    'output directory',
                    'base-directory-if-different-from-public-folder');
});