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?
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.