Gulp takes ages (I think I know why)

Is it slow from homestead or on your host machine? I've stopped running gulp in homestead for this reason.

I usually run it from my host machine (Mac).

I always make a new task called Gulp Vendor. In that task, I compile all my dependencies into one huge vendor.css and vendor.js. You should probably use your elixir mix function only for your own made styles and script.

Here's a little demo:

gulp.task('vendor', function() {

    // Compress the css
    gulp.src([
        vendorPath + 'bootstrap/dist/css/bootstrap.min.css',
    ])
    .pipe(concat('vendor.css'))
    .pipe(uglify_css())
    .pipe(gulp.dest('./public/css/'));

    // Compress the JS
    gulp.src([
        vendorPath + 'jquery/dist/jquery.js',
        vendorPath + 'bootstrap/dist/js/bootstrap.js',
    ])
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./public/js'));


});

And here is my watch/elixir function:

elixir(function(mix) {
    mix.sass('app.scss');

    mix.scripts([
        'app.js'
    ], 'public/js/app.js');
});

This way, the vendor function is slow, but you only need to call it once, or everytime you update/add vendor packages. The elixir function stays fast!

You using flash storage/SSD?

Yeah I'm on a 2012 15" MBP w/ Retina Display, 256GB SSD. (Not a 5400RPM HDD as they use in everything else ;P).

Do SSDs not like Gulp? Or is it Gulp that doesn't like SSDs? :)

No I was just wondering if you were using a slow HDD :P should be fine really. I have stuff copying/compiling and versioning and it takes about 3secs to do it. How slow is yours?

Good post above about doing a task for vendor stuff (since you'd only copy after doing an update to those packages).

It was about 20 seconds in total, which is far too long. Nothing compared to 3 seconds.

I'll try out the suggestion of @dennisvdv as that sounds like it would do the trick.

Any idea why it would take so long in the first place?

Haven't you got timings for each section? I can see that .sass() and .scripts() take about 600ms-700ms each.

You may have an old version. I normally keep elixir updated by just passing * as the version to install.

@dennisvdv thanks I think that's exactly what I'm after. How would I convert the above gulpfile to use your suggestion.

I've just installed gulp-sass but I'm not too familiar with it.

I haven't tested it, but probably something like this:

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

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglify_css = require('gulp-minify-css');

elixir(function(mix) {
    mix.sass('app.scss', 'resources/assets/css/app.scss.output')
    .styles([
            'app.scss.output',
            'bootstrap-select.css',
            'bootstrap-colorselector.css',
            'dropzone.css',
        ], 'public/css/all.css')
    .scripts([
            'bootstrap-select.js',
            'salvattore.js',
            'bootstrap-colorselector.js',
            'jeffreyway-delete.js',
            'bootstrap-notify.js',
        ], 'public/js/app.js')

    .version(['css/all.css', 'js/app.js']);
});



gulp.task('vendor', function() {

    // The scripts
    gulp.src([
        '../../../node_modules/jquery/dist/jquery.js',
        '../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js',
        '../../../node_modules/vue/dist/vue.js',
        '../../../node_modules/vue-resource/dist/vue-resource.js',
        '../../../node_modules/vue-strap/dist/vue-strap.js',
        '../../../node_modules/fuelux/dist/js/fuelux.js',
        '../../../node_modules/moment/min/moment.min.js',
        '../../../node_modules/bootstrap-markdown/js/bootstrap-markdown.js',
        '../../../node_modules/marked/lib/marked.js',
        '../../../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
        '../../../node_modules/sweetalert/dist/sweetalert.min.js',
        '../../../node_modules/dropzone/dist/dropzone.js',
        '../../../node_modules/pdfjs-dist/build/pdf.combined.js',
        '../../../node_modules/socket.io-client/socket.io.js',
    ])
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./public/js'));


    // The styles
    gulp.src([
        '../../../node_modules/fuelux/dist/css/fuelux.css',
        '../../../node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css',
        '../../../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css',
        '../../../node_modules/sweetalert/dist/sweetalert.css',
    ])
    .pipe(concat('vendor.css'))
    .pipe(uglify_css())
    .pipe(gulp.dest('./public/css'))

    // The fonts

    gulp.src([
        'node_modules/font-awesome/fonts',
        'node_modules/bootstrap-sass/assets/fonts/bootstrap',
        'node_modules/fuelux/dist/fonts',
    ])
    .pipe(gulp.dest('./public/fonts/'));

})

Dont forget to install the following packages with npm: gulp gulp-concat gulp-uglify gulp-minify-css

Hope this helps!

@dennisvdv thank you so much for that. I think it is working, but just to check, am I right in thinking I just call gulp whenever I change something (and that pulls in the already compiled vendor dependencies), and gulp vendor when I add new things to the vendor dependencies?

You should run gulp watch to check for filechanges, and you should run gulp vendor to compile all your vendor dependencies into one file. Whenever you add files to the array of vendor packages in your gulpfile, you should re-run gulp vendor. Same for when you update your vendor packages. Like bootstrap 3 to 4 for example. Otherwise you keep using olde dependencies. You should add te vendor.css and vendor.js to your HTML to use it though.

Can I not add vendor.css and vendor.js to my elixir mix function?

@mstnorris Yes of course you can.

gulp vendor doesn't work, my default gulp (Laravel Elixir) task runs.

Anyone have any ideas on this? Gulp doesn't take any arguments, it just runs the default task elixir(function(mix) { ... }.

Why doesn't it work?