Search code examples
javascriptnode.jsgulplaravel-elixirshim

How to use use es*-shims with laravel and browserify?


Let us consider this gulpfile.js:

var elixir = require('laravel-elixir');
elixir(function(mix) {
    mix.coffee(['1.coffee', '2.coffee'], 'storage/app')
      .browserify('app.js', null, 'storage/app')
});

And now I'd like to add some shims here. For all I know, they doesn't return something, they change the environment. Which makes me think they must be run before any other code.

I could put require('es5-shim'); require('es6-shim'); require('es7-shim'); into the beginning of the first file. But I don't like the idea, since I may eventually change the order and it will stop working. And I'm not sure, if they're guaranteed to come in the order I specified them.

So, how do I prepend a file? Or how do you people deal with it?


Solution

  • What I came up with:

    var elixir = require('laravel-elixir')
        gulp = require('gulp'),
        concat = require('gulp-concat')
        fs = require('fs');
    
    elixir.extend('inlineTask', function(func, watcher) {
        var task = new elixir.Task(func.name, func);
        if (watcher) {
            task.watch(watcher);
        }
    });
    
    elixir(function(mix) {
        mix.coffee('**/*.coffee', 'storage/app/app.js')
            .browserify('app.js', 'storage/app/bundle.js', 'storage/app')
            .inlineTask(function bundleJs() {
                return gulp.src([
                        'node_modules/es5-shim/es5-shim.js',
                        'storage/app/bundle.js'])
                    .pipe(elixir.Plugins.if(elixir.config.sourcemaps, elixir.Plugins.sourcemaps.init({loadMaps: true})))
                    .pipe(concat('bundle.js'))
                    .pipe(elixir.Plugins.if(elixir.config.sourcemaps, elixir.Plugins.sourcemaps.write('.')))
                    .pipe(gulp.dest('public/js'));
            }, 'storage/app/bundle.js')
            .version('js/bundle.js');
    });
    

    But note that tasks are not run in the order they specified in the gulpfile.js when running gulp watch. So before that it makes sense to run just gulp.

    Also, gulp (or should I say laravel-elixir) doesn't always detect new files. Supposedly, when source files pattern didn't match any file, when gulp was run.