At the beginning of this series I [showed you how to use Laravel Elixir](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-04-setting-up-laravel-elixir) for your assets pipeline. And in this episode we are going to cover something similar, evolution of Laravel Elixir into Laravel Mix.

Laravel Mix is a wrapper around Webpack that allows you to very easily write Webpack configuration files. In this episode I'm going to show you how to easily set it up for October CMS, I'm also going to show you how to bundle your modules with Webpack and how to use BrowserSync to reload your page every time you make a change.

In this episode we are going to take a look at how you can use Laravel Mix (wrapper around Webpack) to create your asset pipeline in October CMS.

Laravel Mix and Webpack

Since October CMS is based on Laravel I thought it would be fitting to set it up with our installation of October CMS, since Laravel itself uses it out of the box. Laravel Elixir is a kind of a wrapper over Gulp task runner and it lets you write much less code to do your basic compilation of Sass and JavaScript files then you would write using vanilla Gulp.

In this episode we are going to set it up so that it compiles our `.scss` files and our ``.js` files, and it is also going to watch them an compile them every time we hit save. And on top of that it's going to automatically refresh our page when ever we do so using Livereload plugin.

In this episode we are going to set up Laravel Elixir to with our October CMS installation. Also we are going to enable Livereload, so that we can see the changes on our site whenever we save a file.

Setting Up Laravel Elixir

If you ever used Laravel framework for development you must have heard about [Laravel Elixir](https://laravel.com/docs/5.0/elixir). It is an abstraction layer for gulp.js which makes writing your basic gulp tasks super easy. Since it was made for Laravel, it works out of the box with that framework.

Wouldn't it be nice if we could have the power of Elixir on WordPress. Yes, it would you might say. And that is what we are going to be doing in this episode.

First we are going to install Laravel Elixir, then we are going to do some basic tasks with it, like compiling our `.scss` files. Then I'm going to show you how to use LiveReload with it. And finally how to prepare your files for production.

The result of all of this will be Elixir enabled theme which you can download from the link below.

### Download Elixir Theme

[Download it here](https://github.com/ivandoric/elixir)

In this episode of Frontend Tips I'm going to show you how you can use Laravel Elixir in your WordPress workflow, and also how to use it with LiveReload.

Using Laravel Elixir With WordPress

In this episode we are going to setup our Drupal 8 theme to work with Gulp.js task runner and make it compile our sass files, minify our JavaScript files and watch for changes that we do and automatically refresh the browser for us.

This theme is going to do pretty much the same thing as the Olympos theme for WordPress. You can check out the [video about that here](http://watch-learn.com/video-tutorials/using-and-installing-new-olympos-theme/).

In this episode of Drupal 8 Theming tutorial series we are going to setup our theme to work with Sass, Gulp.js and Live Reload.

Tutorials tagged with: LiveReload, livereload

Get in touch