I’ve written before about our build process. Until fairly recently, we used a home-grown set of Gulp tasks rolled into an npm package. Although they are still perfectly usable, we have made the jump to using Laravel Mix with Vagrant for all new projects.
We work on a large variety of projects: from web applications to more traditional marketing websites. We need a build process that is flexible and hassle-free. Mix checks all the boxes and Vagrant allows us to control the specific environment for each project making Mix easier to setup and use.
Note: For more on the technical implementation of making Mix and Browsersync work with Vagrant, see this blog post.
Change is hard, frustrating and time-consuming. We have not made the decision lightly. There are many reasons why we made the switch.
Our Gulp build process used Bower to manage assets, but now that Bower is dead (or in a lengthy fade-out twilight), we needed to make the switch to npm. Honestly, using Bower to manage assets was always a bit awkward. Fetching things was great, but then what? However, it did get us into the habit of using a package manager. Now the move to npm is lateral.
Gulp is a task runner while Webpack is a module bundler. Sure Gulp could be setup to support ES6 modules (with Babel and a polyfill), but it would never be as robust as a module bundler. Webpack’s main purpose is to generate static assets from modules and manage dependencies. It supports the variety of ways modules are expressed as dependencies and different types of modules. This makes it possible to add scripts as dependencies that may not have been originally setup as modules, for example many jQuery plugins.
The benefit of being able to use modules is HUGE. It cannot be overstated. They can be leveraged to create more maintainable, namespaced and reusable code.
Webpack is the best option for managing JS dependencies. After the initial configuration, Webpack works really, really well. There aren’t a lot of errors or hiccups. It just does its thing. After it is configured.
The pain point with Webpack is configuration. Laravel Mix is a wrapper around Webpack. It offers a clean, fluent API for basic build steps. And while it simplifies configuration, it also makes advanced configuration possible.
One more Mix reason: we are big fans of Laravel and use it on many of our projects. Mix is baked into Laravel so some of our developers are already Mix-experienced.
Often our projects aren’t just basic websites. They include areas of complex interaction: multi-step forms or cart total calculations. Sure you can do these things with jQuery, but probably not cleanly and not in a way that is easily extendable when the next feature request comes along. When the project is already using Mix, it’s trivial to add Vue.
We’ve been using Vagrant for a while on our application projects, but we’ve recently started using it on all our projects. This is awesome in a lot of different ways. Specifically for the JS build process, this gives us control over the version of node and npm. We’ve been able to setup Vagrant to work with Mix and Browsersync. More about that in another blog post.
It can be difficult for a developer to let go of something they have built. Other times it can be a relief. In this case, the benefits of switching to Mix are clear and overwhelming. I am excited about the possibilities that open up from our leap to Mix.