Amy Westlake

< Back to blog

Switching from Webpack to Gulp in Laravel 5.4

For a new project at work I wanted to use a jQuery plugin for full screen backgrounds, I found the code on Github and it did not have an npm downloadable version. I did what I would usually do and downloaded the minified JS and the CSS files, included them in the blade template, wrote a function to call in the code and refreshed the browser expecting to see a nice big full screen image.

Instead I was met with a is not a function jQuery error.

To solve this issue I would double check the version of jQuery, check jQuery was being called in before the plugin code and double check the function by calling an alert(). I spent roughly 3 hours googling, researching trying to get this code to work. No joy.

The issue was with how webpack compiles and calls in everything (I still don’t fully understand how it’s supposed to work - I will research another time) and I needed to get this project underway so I decided to remove webpack and go back to using Elixir to compile all the JS and SCSS. I much prefer the workflow and actually find it runs so much quicker than webpack.

To make the switch I removed all the existing node_modules files and folders by running:

rm -rf node_modules/

I updated the package.json file to the following:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "bootstrap-sass": "^3.3.0"
  }
}

Then create a gulpfile.js and the following content:

var elixir = require('laravel-elixir');
elixir.config.cssOutput = 'html/css';
elixir.config.jsOutput = 'html/js';
elixir.config.sourcemaps = false;


elixir(function(mix) {
  mix.scripts(['resources/assets/js/libs/jquery.min.js',
              'resources/assets/js/libs/jquery.plugin.js'],
              'html/js/libs.js')
     .scripts('resources/assets/js/app.js', 'html/js/app.js')
     .sass('resources/assets/sass/app.scss', 'html/css');
});

The run npm install to reinstall all the newly required folders.

Once that’s completed you can go back to running gulp and gulp watch.

So, that’s it! I do eventually want to learn how to make the most of Mix and Webpack but when I’m in a hurry on a project and happy with my existing workflow I would rather stick to Elixir with my Laravel install.


< Back to blog