Dev Notes

Software Development Resources by David Egan.

Laravel Front End Assets Quickstart

Front End, Laravel, gulp
David Egan

Laravel is pre-configured to use Node and Gulp (wrapped in Laravel elixir) to manage and build front-end assets.

Node is used to manage dependencies.

Quick Start Bootstrap

  • In the project root run npm install to fetch the packages defined in package.json
  • Enter gulp to run the default elixir task
  • Bootstrap SASS files will be built in to resources/assets/sass/app.scss
  • There is a font @import rule in resources/assets/sass/app.scss - more efficient to import fonts via HTML
  • Starter variables file at resources/assets/sass/variables.scss

Set Node Version

A modern node is required - if necessary use nvm to load in a suitable version:

nvm ls # List available local node versions
nvm ls-remote # List available remote node versions
nvm install v6.5.0 # Install v6.5.0
nvm use v6.5.0 # Use v6.5.0

See nvm for more.


Amend Gulpfile.js:

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


 | Elixir Asset Management
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.

elixir(mix => {
       .version(['css/app.css', 'js/app.js']); // app.css and app.js are now cache-busting;
    // Add glyphicons from Bootstrap

Reference the versioned CSS file in a blade view - possibly resources/views/partials/head.blade.php:

<link rel="stylesheet" href="{{ elixir ('css/app.css') }}" media="screen" title="no title" charset="utf-8">

Reference the versioned JavaScript file in a blade view - possibly resources/views/partials/footer.blade.php:

<script src="{{ elixir ('js/app.js') }}"></script>

comments powered by Disqus