How To Setup Laravel Elixir For Any Project

Published in

What Da Fox

3 min readApr 17, 2016

We all love our build tools nowadays, Gulp, Grunt, etc. But really, nobody likes to write/copy-paste 50 lines of configuration for each project, right?

Despite its name, Laravel Elixir is a tool that allows you to get started on your project pretty fast, only by writing a couple lines of code.

Laravel Elixir

Fluent API for Gulp.

github.com

Let me show you an example.

Requirements

To get started, you will need a couple dependencies on your machine:

What We’ll Do

To get started with Laravel Elixir, we need an example. An easy one would be to setup a project, with a simple index.html, your typical SaSS files and a fresh VueJS application and Browserify. Let’s do this!

Setup the Project

Create the Project

Create a folder for your project and run:

npm init

Follow the instructions and your new npm project should be ready in no time.

Install Dependencies

For this project, we will need a few dependencies:

npm install --save-dev gulp laravel-elixir vue

Prepare Directory Structure

For this project, we will start with a very simple directory structure:

- /my-project
    - public/
    - resources/
        - js/
            - app.js
        - sass/
            - app.scss
    - index.html
    - gulpfile.js
    - package.json

The public folder will contain our generated assets after the build.

The resources will contain our SaSS and JavaScript source files.

The index.html is our homepage.

The “Hello World” Example

Homepage

For our index.html file, nothing special. Create a simple file with an h1 tag, that will use a dynamic title like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World Example</title>
</head>
<body>
    <h1>{{ title }}</h1>
</body>
</html>

We’ll get back to it later.

SaSS assets

For our styling, nothing special too. Create a app.scss within the resources/sass/ directory, with the following content:

h1 {
    font-size: 2.4em;
    font-family: Helvetica, Arial, sans-serif;
}

JavaScript

For our application, we are going to create a basic VueJS instance in the app.js file within the resources/js/ directory, that will contain our title (“Hello world”) and attach it to the body of our HTML page:

import Vue from 'vue';new Vue({
    el: 'body',    data: {
        title: 'Hello world'
    }
});

Compile into Public Assets

Create your gulpfile.js at the root of your project:

var elixir = require('laravel-elixir');elixir.config.assetsPath = 'resources/';elixir( function(mix) {
    mix.sass('app.scss');
    mix.browserify('app.js');
});

This is all you need to compile your SaSS with autoprefixing and bundle your javascript using browserify and babel. Amazing, isn’t it?

The first line is pretty familiar, just declaring a variable and import laravel elixir.

The second one is to update the default assets path to resources/, as Laravel Elixir uses resources/assets/ by default.

Then we use the elixir function passing a anonymous function which receives a “mix” parameter.

Then we will call the “sass” method, with the name of our main SaSS file as an argument, and the “browserify” method with the name of our main JavaScript file as a parameter.

All done!

You could also chain these methods, like so:

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

Use our Assets in our Homepage

All the assets generated will be placed in a public/ directory at the root of your project by default. You can also override this path if you want.

Here are the generated assets for this example:

- my-project/
    - public/
        - css/
            - app.css
            - app.css.map
        - js/
            - app.js
            - app.js.map

Now you simply have to import these files into your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World Example</title>
    <link rel="stylesheet" href="public/css/app.css">
</head>
<body>
    <h1>{{ title }}</h1>    <script src="public/js/app.js"></script>
</body>
</html>

And you are good to go!

WhatDaFox-Examples/Laravel-Elixir

Laravel-Elixir - An example on how to setup Laravel Elixir for any project