Back Button Vue

Painless Builds With Elixir

Laravel Elixir takes the yawn out of writing your Gulpfiles. Why spends hundreds of lines writing what can be accomplished with just a few?

15 episodes
1:37:02 hrs
Start Series
Notification bell This series has been archived. We instead recommend: Learn Laravel Mix A series is marked as archived when the content is no longer up-to-date or relevant to most viewers.
  • Latest Episode: Laravel Elixir Extension From Scratch

  • Like this series? Share the love!

    1. Run Time 4:13 Free

      Before we can toy around with Elixir, we first need to install the required tools.

    2. It's never been easy to write and compile Sass (or Less, if you prefer) in a project. Let's go over the details.

    3. When it comes to JavaScript, Elixir provides lots of options! Enjoy using CoffeeScript? No problemo. What about using the latest features that EcmaScript 6 and 7 have to offer? Easy! One line of code will do it.

    4. Run Time 5:16

      Elixir offers sourcemap support out of the box. This means, when debugging in the browser, rather than reviewing some foreign compiled script or stylesheet, you can instead dig directly into the original Sass partial, or JavaScript module. How cool is that!?

    5. Run Time 1:08

      Manually running gulp can get tedious really fast. Instead, opt for the useful gulp watch command to keep an eye on your files for changes.

    6. Run Time 3:25

      Easily, one of the most frequent tasks that you'll need to perform, as part of your build process, is file concatenation. Whether you need to merge some scripts or stylesheets, Elixir makes it a cinch!

    7. Run Time 2:32

      If you'd like to trigger your PHPUnit or PHPSpec tests with Gulp, then the gulp tdd Terminal command will be your best friend!

    8. Run Time 5:22

      Aggressive caching on your production server is a useful technique to improve the performance of your app. But what about when we want to bust that cache? Do we really have to manually update a querystring on a file path? Nope! There's an easier way.

    9. With a vanilla Gulpfile, hooking into Browserify can be a bit of a pain. It takes lots and lots of research to figure out how to apply the necessary transformations and such. With Elixir, it's as simple as a single method call!

    10. Let's use all the techniques we've learned to build a Gulpfile for a simple, yet typical web application.

    11. What about the situations, where you need to call a custom Gulp task of yours? Or what if you even want to extend Elixir, itself? I'll show you how in this lesson.

    12. Run Time 5:06

      Whenever possible, stick with the Elixir conventions. However, sometimes, you have no choice. Maybe you require a different public folder name. Or maybe all of your assets should instead be stored in the "app/assets" directory. In this lesson, you'll learn to override the default configuration.

    13. Run Time 5:21 Free

      Laravel Elixir 3.3 includes Browsersync support straight out of the box. This means, with minimal effort, you can modify a view or piece of styling, and instantly watch your browser update to reflect the changes!

    14. We reviewed Browsersync in the previous episode, but I want to impress upon you how useful this tool can be, when optimizing your sites for various devices. Wouldn't it be nice if you could, in real-time, review a page's layout for desktops, tablets, and phones? Even better, wouldn't it be cool if they were all in sync with one another?

    15. In this episode, we'll, from scratch, create a custom Laravel Elixir extension that allows us to integrate Webpack into our build process.

      View the source for this lesson on GitHub.

You May Also Enjoy...

Here are some additional series that may be up your alley.

Vue Laravel and the Front-end

Let's take a break from the back-end, and instead focus on that other world: the front-end! Don't worry, Laravel 5 has made this process as enjoyable...

49:57 mins
Vue Do You React?

While Laracasts is dedicated to PHP and Laravel, the reality is that most of us need to write JavaScript daily as well. In this series, we'll learn ab...

1:25:24 hrs
Vue The Vast World of Vue.js 0.12

Vue.js is the best JavaScript framework that you've likely never heard of. We've already covered React here at Laracasts, so let's move on to somethin...

3:08:08 hrs
Vue Modern CSS Workflow

The way we construct and think of CSS has changed drastically in the last ten years. In this series, we'll review key tools in every modern frontender...

1:41:11 hrs
Vue Learn Flexbox Through Examples

Flexbox is easily one of the most important additions to CSS in the last decade. The only problem is that there's a bit of a learning curve. Trust me,...

1:12:25 hrs