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.

Versioning

Amend Gulpfile.js:

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

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | 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 => {
    mix.sass('app.scss')
       .webpack('app.js')
       .version(['css/app.css', 'js/app.js']); // app.css and app.js are now cache-busting;
    // Add glyphicons from Bootstrap
    mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/build/fonts/bootstrap');
    mix.browserify('app.js');
});

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>
@stack('script-footer')
comments powered by Disqus