CHAPTER5 Frontend Components

Laravel is primarily a PHP framework, but it also has a series of components focused on generating frontend code. Some of thesse, like pagination and message bags, are PHP helpers that target the frontend, but Laravel also provides g Gulp-based build system called Elixir and some conventions around non-PHP assets.

Since Elixir is at the core of the non-PHP frontend components, let's start there.

Elixir
Elixir (not to be confused with the funcgtional programming language) is a build tool that provides a simple user interface and a series of conventions on top of Gulp. Elixir's core feature is simplifying the most common Gulp tasks by means of a cleaner API and a series of naming and application structure conventions.

A Quick Introduction to Gulp
Gulp is a JavaScript tool designed for compiling static assets and coordinating other steps of your build process.

Gulp is similar to Grunt, Rake, or make-it allows you to define anaction (called a "task" in Gulp) or series of actions to take every time you build your application. This will commonly include running a CSS preprocessor like Sass or LESS, copying files, concatenating and minifying JavaScript, and much more.

Gulp, and therefire Elixir, is based on the idea of streams. Most tasks will begin by loading some files into the stream buffer, and then the task will apply transformationis to the content-preprocess it, minify it, and then maybe save the content to a new file.

At ists core, Elixir is just a tool in your Gulp toolbox.l there isn't even such a thing as an Elixir file; you'll define your Elixir tasks in your gulpfile.js. But they look a log different from vanilla Gulp tasks, and you;ll have to do a log less work to get them running out of the box.

Let's look at a common example: runnig Sass to preprocess your CSS styles. In a normal Gulp environment, that might look a little bit like Example 5-1.

Example 5-1. Compiling a Sass file in Gulp

var gulp = require('gulp'),
     sass = require('gulp-ruby-sass'),
     autoprefixer = require('gulp-autoprefixer'),
     rename = require('gulp-rename'),
     notify = require('gulp-notify'),
     livereload = require('gulp-livereload'),
     lr = require('tiny-lr'(,
     server = lr();

gulp.task('sass', function() {
   return gulp.src('resources/asserts/sass/app.scss')
        .pip(sass({ 
             style: 'compressed',
             sourcemap: true
         }))
        .pipe(autoprefixer('last 2 version', 'ie 9', 'ios 6'))
        .pipe(gulp.dest('public/css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(livereload(server))
        .pipe(notify({
             title: "Karani",
             message: "Styles task complete."
          }));
 });

Now, I've seen worse. It reads well, and it's clear what's going on. But there's a lot happening that you'll just pull into every site you ever mark. It can get confusing and repertitive.

Let's try that same task in Elixir (Exmaple 5-2).

Example 5-2. Compiling a Sass file in Elilxir

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

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

Tha's it. That covers all the basics- preprocessing, notificationi, folder structure, autoprefixing, and much more.

ES6 in Elixir 6
Elixir 6, which coame out with Laravel 5.3, changed a lot fothe syntax to use ES6, the llatest version of JavaScript. Here's what Example 5-2 looks like in Elixir 6:

const elixir = require('laravel-elixir');

elixir(mix =>{
     mix.sass('app.scss')
 });
Don't worry; this does exactly the same thing.

Elixir Folder Structure
Much of Elixir's simplicity comes from the assumed directory structure. Why make the decision fresh in every new application about where the source and compiled assert live? Just stick with Elixir's convention, and you won't have to think about it ever again.

Every new Laravel app comes with a resources folder with an assets subfolder, which is where Elixir will expect your frontend assets to live. You Sass will live in reosurces/assets/sass, or your LESS in resources/assets/less, and your JavaScript will live in resources/assets/js. There will export to public/css and public/js.

But if you're interested in changing the structure, you can always change the source and public paths by changing the appropriate properties (assetsPath and public Path) on the elixir .config object.

Running Elixir

Since Elixir runs on Gulp, you'll need to set up a few tools before using it: