Compiling Assets (Laravel Elixir)

Compiling Assets (Laravel Elixir)

• Introduction
• Installation & Setup
• Running Elixir
• Working With Stylesheets
  • Less
  • Sass
  • Stylus
  • Plain CSS
  • Source Maps
• Working With Scripts
  • Webpack
  • Rollup
  • Scripts
• Copying Files & Directories
• Versioning / Cache Busting
• BrowserSync

Introduction

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports common CSS and JavaScript pre-processors like Sass and Webpack. Using method chaining, Elixir allows you to fluently define your asset pipeline. For example:

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

If you've ever been confused and overwhelmed about getting started with Gulp and asset compilation, you will love Laravel Elixir. However, you are not required to use it while developing your application. You are free to use any asset pipeline tool you wish, or even none at all.

Installation & Setup

Installing Node

Before triggering Elixir, you must first ensure that Node.js and NPM are installed on your machine.

node -v
npm -v

By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install the latest version of Node and NPM using simple graphical installers from their download page.

Gulp

Next, you'll need to pull in Gulp as a global NPM package:

npm install --global gulp-cli

Laravel Elixir

The only remaining step is to install Laravel Elixir. Within a fresh installation of Laravel, you'll find a package.json file in the root of your directory structure. The default package.json file includes Elixir and the Webpack JavaScript module bundler. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:

npm install

If you are developing on a Windows system or you are running your VM on a Windows host system, you may need to run the npm install command with the --no-bin-links switch enabled:

npm install --no-bin-links

Running Elixir

Elixir is built on top of Gulp, so to run your Elixir tasks you only need to run the gulp command in your terminal. Adding the --production flag to the command will instruct Elixir to minify your CSS and JavaScript files:

// Run all tasks...
gulp

// Run all tasks and minify all CSS and JavaScript...
gulp --production

Upon running this command, you'll see a nicely formatted table that displays a summary of the events that just took place.

Watching Assets For Changes

The gulp watch command will continue running in your terminal and watch your assets for any changes. Gulp will automatically recompile your assets if you modify them while the watch command is running:

gulp watch

Working With Stylesheets

The gulpfile.js file in your project's root directory contains all of your Elixir tasks. Elixir tasks can be chained together to define exactly how your assets should be compiled.